ฉันจะแยกพื้นที่ดรอปดาวน์ออกจากพื้นที่ดรอปดาวน์อื่นได้อย่างไร

ฉันมีตัวเลือกแบบเลื่อนลงสองตัวเลือก โดยเมื่อคุณคลิกตัวเลือกที่มีค่า "อื่นๆ" ระบบจะสร้างพื้นที่ข้อความใต้แบบฟอร์มแบบเลื่อนลง

ทั้งสองส่วนทำงานได้ดี แต่ฉันต้องสร้าง parent wrapper แยกต่างหากสำหรับทั้งคู่ และฉันไม่ต้องการให้เป็นอย่างนั้นเพราะฉันจะเพิ่มเมนูแบบเลื่อนลงแบบไดนามิก และมันจะยากที่จะสร้าง div parent wrapper ที่ไม่ซ้ำใครให้มากขึ้นแบบไดนามิก

ฉันต้องการให้แต่ละดรอปดาวน์แตกต่างกันโดยสร้างกล่องข้อความของตัวเอง

ฉันได้สร้างโค้ดทั้งหมดไว้ในpen นี้แล้ว

• รหัสสำหรับการอ้างอิงของคุณ

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="/th#" 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="/th#" 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-->

จส

    //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();

ขอบคุณมากสำหรับความช่วยเหลือ ฉันต้องการความช่วยเหลือนี้อย่างมาก โปรดค้นหาลิงก์ปากกาเพื่อทำความเข้าใจปัญหาทั้งหมดได้ดียิ่งขึ้น