html - jqueryリピーターを使用して、selectで入力を非表示にします

Question

以下に私のプロジェクトを含めました。

私の問題は、リピーターの選択変更が同時に変更されていることです。それぞれのリピーターが単独で動作することを望みます。これについて助けが必要です。

$('.sare-fields').change(function() {
  var select = $(this).attr("id");
  var option_val = $(this).val();
  var current = $('.data-fields[data-parent=' + select + '][data-sub=' + option_val + ']');
  $('.row').find('.data-fields[data-parent=' + select + ']').hide();
  current.show();
});


$(document).ready(function() {
  $(".repeater").repeater({
    initEmpty: false,
    isFirstItemUndeletable: true,
    show: function() {
      $(this).slideDown();

      $(this)
        .find(".sare-fields")
        .change(function() {
          var select = $(this).attr("id");
          var option_val = $(this).val();
          var current = $(".data-fields[data-parent=" + select + "][data-sub=" + option_val + "]");
          $(".data-fields[data-parent=" + select + "]").hide();
          current.show();
        });
    },
    hide: function(deleteElement) {
      if (confirm("Are you sure you want to delete this element?")) {
        $(this).slideUp(deleteElement);
      }
    },
  });
});

<form method="POST" id="add-question">
  <div class="repeater">
    <div data-repeater-list="AddQuestion">
      <div data-repeater-item>
        <div class="row">
          <div class="col-md-3">
            <div class="sare-title">Question</div>
            <input type="text" name="question" placeholder="Question" value="" />
          </div>

          <div class="col-md-3">
            <div class="sare-title">Question Type</div>
            <select class="sare-fields" id="question_type" name="question_type">
              <option value="text">Text</option>
              <option value="listen" selected>Listen</option>
            </select>
          </div>
          
          <div class="data-fields col-md-3" data-parent="question_type" data-sub="listen">
            <div class="sare-title">Audio</div>
            <input type="text" name="audio" placeholder="Audio" value="" />
          </div>
          
  
          <div class="col-md-3">
            <div class="sare-title">Option Type</div>
            <select class="sare-fields" id="option_type" name="option_type">
              <option value="text" selected>Text</option>
              <option value="image">Image</option>
            </select>
          </div>
          <div class="data-fields col-md-3" data-parent="option_type" data-sub="text">
            <div class="sare-title">Option (A)</div>
            <input type="text" name="option_a" placeholder="Option (A)" value="" />
          </div>

          <div class="data-fields col-md-3" data-parent="option_type" data-sub="image">
            <div class="sare-title">Option Image (A)</div>
            <input type="text" name="option_image_a" placeholder="Option Image (A)" value="" />
          </div>

          <div class="col-md-3">
            <div class="sare-title">Correct Answer</div>
            <select class="sare-fields" id="correct_answer" name="correct_answer">
              <option value="a" selected>A</option>
              <option value="b">B</option>
            </select>
          </div>
          <div class="col-md-12">
            <button type="button" class="btn btn-danger btn-md" data-repeater-delete="">Delete</button>
          </div>
        </div>
      </div>
      <hr>
    </div>
    <input data-repeater-create type="button" class="btn btn-success btn-sm" value="Add More" /><br />
    <br />
    <input type="submit" name="submit" class="btn btn-primary" value="Submit" />
  </div>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>

実際、私の目標は、各ボックスの特定の目標である入力を select で変更することですが、残念ながら、これらのコードではこれを達成できません。