title: Hide input with select, with jquery repeater
body: <p>I have included my project below.</p>
  <p>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.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.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);
        }
      },
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form method="POST" id="add-question"&gt;
    &lt;div class="repeater"&gt;
      &lt;div data-repeater-list="AddQuestion"&gt;
        &lt;div data-repeater-item&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-md-3"&gt;
              &lt;div class="sare-title"&gt;Question&lt;/div&gt;
              &lt;input type="text" name="question" placeholder="Question" value="" /&gt;
            &lt;/div&gt;
  
            &lt;div class="col-md-3"&gt;
              &lt;div class="sare-title"&gt;Question Type&lt;/div&gt;
              &lt;select class="sare-fields" id="question_type" name="question_type"&gt;
                &lt;option value="text"&gt;Text&lt;/option&gt;
                &lt;option value="listen" selected&gt;Listen&lt;/option&gt;
              &lt;/select&gt;
            &lt;/div&gt;
            
            &lt;div class="data-fields col-md-3" data-parent="question_type" data-sub="listen"&gt;
              &lt;div class="sare-title"&gt;Audio&lt;/div&gt;
              &lt;input type="text" name="audio" placeholder="Audio" value="" /&gt;
            &lt;/div&gt;
            
    
            &lt;div class="col-md-3"&gt;
              &lt;div class="sare-title"&gt;Option Type&lt;/div&gt;
              &lt;select class="sare-fields" id="option_type" name="option_type"&gt;
                &lt;option value="text" selected&gt;Text&lt;/option&gt;
                &lt;option value="image"&gt;Image&lt;/option&gt;
              &lt;/select&gt;
            &lt;/div&gt;
            &lt;div class="data-fields col-md-3" data-parent="option_type" data-sub="text"&gt;
              &lt;div class="sare-title"&gt;Option (A)&lt;/div&gt;
              &lt;input type="text" name="option_a" placeholder="Option (A)" value="" /&gt;
            &lt;/div&gt;
  
            &lt;div class="data-fields col-md-3" data-parent="option_type" data-sub="image"&gt;
              &lt;div class="sare-title"&gt;Option Image (A)&lt;/div&gt;
              &lt;input type="text" name="option_image_a" placeholder="Option Image (A)" value="" /&gt;
            &lt;/div&gt;
  
            &lt;div class="col-md-3"&gt;
              &lt;div class="sare-title"&gt;Correct Answer&lt;/div&gt;
              &lt;select class="sare-fields" id="correct_answer" name="correct_answer"&gt;
                &lt;option value="a" selected&gt;A&lt;/option&gt;
                &lt;option value="b"&gt;B&lt;/option&gt;
              &lt;/select&gt;
            &lt;/div&gt;
            &lt;div class="col-md-12"&gt;
              &lt;button type="button" class="btn btn-danger btn-md" data-repeater-delete=""&gt;Delete&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;hr&gt;
      &lt;/div&gt;
      &lt;input data-repeater-create type="button" class="btn btn-success btn-sm" value="Add More" /&gt;&lt;br /&gt;
      &lt;br /&gt;
      &lt;input type="submit" name="submit" class="btn btn-primary" value="Submit" /&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>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.</p>