Hide input with select, with jquery repeater

Question

I have included my project below.

My problem is that the select changes in the repeater are changing in all at the same time. I want each repeater to operate in itself. I need help with this.

$('.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>

In fact, my goal is to change the inputs, which are my specific goals in each box, with select, but unfortunately I cannot achieve this with these codes.

Answer 1

There's two main problems in your code. The first is that you're applying id attributes to elements which are being cloned dynamically. This will result in multiple elements sharing the same id which is invalid and leads to problems with the UI and JS. In this instance you can use a data attribute to store metadata with the parent elements to relate them to their children.

Secondly, the jQuery.repeater library is very outdated, 5 years in fact, and is causing all kinds of UI glitches due to its incompatibility with jQuery 3.x. I would also state that the library itself is almost entirely redundant as the logic to replace it is simply two event handlers; one for adding content and another to remove it. Try this:

jQuery($ => {
  $(document).on('change', '.sare-fields', e => {
    let $select = $(e.target);
    let id = $select.data("id");
    let value = $select.val();

    let $container = $select.closest('.repeater');
    $container.find('.row .data-fields[data-parent=' + id + ']').hide();
    $container.find('.data-fields[data-parent=' + id + '][data-sub=' + value + ']').show();
  });

  // repeater functionality...
  $('.btn-add').on('click', e => {
    let $clone = $('.repeater').first().clone().hide();
    $clone.find(':text').val('');
    $clone.find('select option:first').prop('selected', true);
    $clone.insertAfter('.repeater:last').slideDown();
  });

  $(document).on('click', '.repeater .btn-delete', e => {
    if (confirm("Are you sure you want to delete this element?")) {
      $(e.target).closest('.repeater').slideUp(400, function() { $(this).remove() });
    }
  });
});

/* prevent removing the first section by hiding the delete button within it */
.repeater:first-of-type .btn-delete {
  display: none;
}

<form method="POST" id="add-question">
  <div class="repeater">
    <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 Point</div>
        <input type="text" name="question_point" placeholder="Question Point" value="" />
      </div>
      <div class="col-md-3">
        <div class="sare-title">Question Type</div>
        <select class="sare-fields" name="question_type" data-id="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">Question Detail</div>
        <textarea type="text" name="question_detail"></textarea>
      </div>
      <div class="col-md-3">
        <div class="sare-title">Option Type</div>
        <select class="sare-fields" name="option_type" data-id="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="text">
        <div class="sare-title">Option (B)</div>
        <input type="text" name="option_b" placeholder="Option (B)" value="" />
      </div>
      <div class="data-fields col-md-3" data-parent="option_type" data-sub="text">
        <div class="sare-title">Option (C)</div>
        <input type="text" name="option_c" placeholder="Option (C)" value="" />
      </div>
      <div class="data-fields col-md-3" data-parent="option_type" data-sub="text">
        <div class="sare-title">Option (D)</div>
        <input type="text" name="option_d" placeholder="Option (D)" value="" />
      </div>
      <div class="data-fields col-md-3" data-parent="option_type" data-sub="text">
        <div class="sare-title">Option (e)</div>
        <input type="text" name="option_e" placeholder="Option (e)" 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="data-fields col-md-3" data-parent="option_type" data-sub="image">
        <div class="sare-title">Option Image (B)</div>
        <input type="text" name="option_image_a" placeholder="Option Image (B)" value="" />
      </div>
      <div class="data-fields col-md-3" data-parent="option_type" data-sub="image">
        <div class="sare-title">Option Image (C)</div>
        <input type="text" name="option_image_c" placeholder="Option Image (C)" value="" />
      </div>
      <div class="data-fields col-md-3" data-parent="option_type" data-sub="image">
        <div class="sare-title">Option Image (D)</div>
        <input type="text" name="option_image_d" placeholder="Option Image (D)" value="" />
      </div>
      <div class="data-fields col-md-3" data-parent="option_type" data-sub="image">
        <div class="sare-title">Option Image (E)</div>
        <input type="text" name="option_image_e" placeholder="Option Image (E)" value="" />
      </div>
      <div class="col-md-3">
        <div class="sare-title">Correct Answer</div>
        <select class="sare-fields" name="correct_answer" data-id="correct_answer">
          <option value="a" selected>A</option>
          <option value="b">B</option>
          <option value="c">C</option>
          <option value="d">D</option>
          <option value="e">E</option>
        </select>
      </div>
      <div class="col-md-12">
        <button type="button" class="btn btn-danger btn-md btn-delete">Delete</button>
      </div>
    </div>
    <hr>
  </div>
  <input type="button" class="btn btn-success btn-sm btn-add" value="Add More" /><br /><br />
  <input type="submit" name="submit" class="btn btn-primary" value="Submit" />
</form>

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