How can I isolate a dropdown area from another dropdown area

Question

I have two dropdown selections where when you click on the option with value "other", it generates a text area just below the dropdown form.

Both areas work fine but to do so I had to create separate parent wrappers for both and I don't want that because I will be dynamically adding more dropdowns and it will be hard to dynamically make more unique parent wrapper divs.

I want each dropdown to be different from each other with their own textboxes generated.

I have made the entire code available in this pen

• Code for your reference

HTML

        <section id="alterationForm1">
      <div class="card">
        <div class="imgCard">
          <img src="http://abhisheksuresh.online/alter/assets/uploadImage.svg" alt="upload-image" height="128px" width="128px">
          <span class="badge badge-success" style="z-index: 1; position: absolute;" data-toggle="tooltip" data-placement="left" title="Tap on the image to upload picture of your defected garment"><i class="fa fa-question-circle" aria-hidden="true"></i></span>
        </div>
        <!--Dropdown List-->
        <div class="form-group">
          <label for="exampleFormControlSelect1"><p class="dropDownLabel">Select alteration type</p></label>
          <select class="form-control alterationTypeSelect" name="alterationTypeSelect">
                  <option value="button">Button</option>
                  <option value="stitching">Stitching</option>
                  <option value="cloth">Cloth</option>
                  <option value="fabrics">Fabrics</option>
                  <option value="otherClick">Other</option>
                </select>
        </div>
        <div class="hideMe textBoxDiv">
          <div class="form-group">
            <label for="exampleFormControlTextarea1">Additional alteration details</label>
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                    </div>
                </div><!--text box div-->
                 <div class="submitButton text-center">
                     <a href="#" class="btn btn-success btn-pill">Submit</a>
                 </div><!--submitButton-->
              </div><!--card-->
    </section><!--alteration form-->
    <div data-duplicate="demo" class="demoClass">
            <div class="card">
            <div class="imgCard">
                <img src="http://abhisheksuresh.online/alter/assets/uploadImage.svg" alt="upload-image" height="128px" width="128px">
                <span class="badge badge-success" style="z-index: 1; position: absolute;" data-toggle="tooltip" data-placement="left" title="Tap on the image to upload picture of your defected garment"><i class="fa fa-question-circle" aria-hidden="true"></i></span>
            </div>
            <!--Dropdown List-->
            <div class="form-group">
                <label for="exampleFormControlSelect1"><p class="dropDownLabel">Select alteration type</p></label>
                <select class="form-control alterationTypeSelect" name="alterationTypeSelect">
                  <option value="button">Button</option>
                  <option value="stitching">Stitching</option>
                  <option value="cloth">Cloth</option>
                  <option value="fabrics">Fabrics</option>
                  <option value="otherClick">Other</option>
                </select>
            </div>
            <div class="hideMe textBoxDiv">
                <div class="form-group">
                    <label for="exampleFormControlTextarea1">Additional alteration details</label>
                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                </div>
            </div><!--text box div-->
            <div class="submitButton text-center">
                <a href="#" class="btn btn-success btn-pill">Submit</a>
            </div><!--submitButton-->
    </div><!--card-->
         <div id="addOnButton" class="text-center">
            <button class="btn-danger btn-sm" data-duplicate-add="demo">Add More</button>
        </div>
    </div><!--demo class-->

JS

    //When clicked on option with "other" value
    $('#alterationForm1 .alterationTypeSelect').on('change', function(){
      var val = $(this).val();
      if(val === 'otherClick') {
        $('#alterationForm1 .textBoxDiv').removeClass('hideMe');
      }
        else{
            $('#alterationForm1 .textBoxDiv').addClass('hideMe');
        }
      });
    $('#alterationSection2 .alterationTypeSelect').on('change', function(){
      var val = $(this).val();
      if (val === 'otherClick') {
        $('#alterationSection2 .textBoxDiv').removeClass('hideMe');
      }
        else{
            $('#alterationSection2 .textBoxDiv').addClass('hideMe');
        }
      });

    $('.demoClass .alterationTypeSelect').on('change',function(){
         var val = $(this).val();
      if (val === 'otherClick') {
        $('.demoClass .textBoxDiv').removeClass('hideMe');
      }
        else{
            $('.demoClass .textBoxDiv').addClass('hideMe');
        }
      });


    //Dynamic Adding
    $("#czContainer").czMore();

Thank you so much for the help. I am in a great need for this help. Please find the pen link to better understand the entire problem.

Answer 1

please follow the below pen as I have modified your code as we want elements to be dynamically triggered:

https://codepen.io/anon/pen/NYyvpy?editors=1011

    //question mark tooltip
    $('[data-toggle="tooltip"]').tooltip()
    //When clicked on other button
    $('body').on('change','.alterationTypeSelect', function(){
      console.log(544);
      var val = $(this).val();
      if(val === 'otherClick') {
        $(this).parent().parent().find('.textBoxDiv').removeClass('hideMe');
      }
        else{
            $(this).parent().parent().find('.textBoxDiv').addClass('hideMe');
        }
      });

    //Dynamic Adding
    $("#czContainer").czMore();

Also, follow this link if you want to understand how newly added elements work with events

Event binding on dynamically created elements?