Hide/Show Div based on selected dropdown option within a repeated item

Question

so far I'have achieved this for one single element with the following code:

    <div class="form-group">
     <label class="control-label">Service</label>
     <select class="form-control select2 service">
      <option>Select Service</option>
      <optgroup label="Services">
       <option value="service1">Service 1</option>
       <option>Service 2</option>
       <option>Service 3</option>
       <option value="special">Special</option>
      </optgroup>
     </select>
    </div>

    <div class="hidden-input">
     <div class="col-sm-8">
      <div class="form-group">
       <label class="control-label">Description</label>
        <textarea class="form-control" name="customDesc" rows="2">
        </textarea>
      </div>
     </div>
    </div>

    <script>
    $('.service').on('change', function () {
        var $this = $(this),
            value = $this.val();

        if (value == 'special') {
            $('.hidden-input').fadeIn(350);
        } else {
            $('.hidden-input').fadeOut(250);
        }
    });
</script>

The problem is that the service class select is repeated and so do the show-hidden div, this makes show/hide all "hidden-input" elements when the first "value=special" value is selected in the dropdown.

I tryied to implement the same code in the show callback targeting the instance of the repeated element in order to hide or show the hidden element from within the repeated item but no luck:

// For service repeater
    $('.repeater').repeater({

        show: function () {
            $(this).slideDown();
            $(this).find('.select2-multiple').select2({
                placeholder: "Select Title",
                allowClear: true,
            });
            $(this).find('.select2').select2({
                placeholder: "Select Title",
                allowClear: true,
            });
            $(this).find('.service').on('change', function () {
                var $this = $(this),
                    value = $this.val();

                if (value == 'special') {
                    $('.hidden-input').fadeIn(350);
                } else {
                    $('.hidden-input').fadeOut(250);
                }
            });
        },
        hide: function (deleteElement) {
            if (confirm('Are you sure you want to delete this element?')) {
                $(this).slideUp(deleteElement);
            }
        }
    });

Any suggestions?

Answer 1

Here is my best guess to assist in targeting the correct hidden-input , based on the select changed;

1. Goes up the DOM to the nearest form-group using closest
2. Goes to the next DOM item that is a hidden-input
3. Toggles that.

 $('.service').on('change', function() { var $this = $(this), value = $this.val(); var $target = $this.closest(".form-group").next(".hidden-input"); //best guess on provided info if (value == 'special') { $target.fadeIn(350); } else { $target.fadeOut(250); } }); 

 .hidden-input{ display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <label class="control-label">Service</label> <select class="form-control select2 service"> <option>Select Service</option> <optgroup label="Services"> <option value="service1">Service 1</option> <option>Service 2</option> <option>Service 3</option> <option value="special">Special</option> </optgroup> </select> </div> <div class="hidden-input"> <div class="col-sm-8"> <div class="form-group"> <label class="control-label">Description</label> <textarea class="form-control" name="customDesc" rows="2"> </textarea> </div> </div> </div> <div class="form-group"> <label class="control-label">Service</label> <select class="form-control select2 service"> <option>Select Service</option> <optgroup label="Services"> <option value="service1">Service 1</option> <option>Service 2</option> <option>Service 3</option> <option value="special">Special</option> </optgroup> </select> </div> <div class="hidden-input"> <div class="col-sm-8"> <div class="form-group"> <label class="control-label">Description</label> <textarea class="form-control" name="customDesc" rows="2"> </textarea> </div> </div> </div>