只添加了最后一项（jquery）

Question

我有一个项目列表，当我点击它打开的模式时，您可以更改详细信息。所以，我有一个选择框，当选择一个选项时会有一个HTML附加，但我的问题是选择框，或者我的jquerycode只能处理最后添加的项目。

这是我的HTML / JS / CSS代码

$(document).ready(function(){
            $('.set').click(function(){
              $('.askq').removeAttr('hidden');
              $(this).attr('disabled', 'disabled');
            });
            $('.mode').change(function(e){
              e.preventDefault();
               var val = $(".mode option:selected").val();
               var div = document.getElementById('address');
               console.log(val);
              if(val=="Delivery"){
              div.innerHTML="<label style='float:center; font-size:15px; color:black'><b>&nbsp;Delivery Address:</b></label><input type='text' name='d_address' class='form-control has-success' id='defadd' style='width:250px' value='{{$order->location}}'><input type='checkbox' class='defaultadd' id='defaultadd' checked>&nbsp;Use default address";
              }
           else {
               div.innerHTML="<label><label style='float:center; font-size:15px; color:black'><b>&nbsp;Pick-Up Address:</b></label>&nbsp;<label>{{$order->c_location}}</label><input type='hidden' name='p_address' value='{{$order->c_location}}'>";
               }
        
          $(".defaultadd").change(function(){
          if ($(".defaultadd").is(":checked")){
              // $select.removeAttr('disabled');
               $('#defadd').val('{{$order->location}}');
          }else{
              $('#defadd').val('');
              $('#defadd').attr('placeholder', 'Please choose delivery location')
             // $select.attr('disabled','disabled');
          }
           });
        });
            });

https://stackoverflow.com/questions/48403772/only-the-last-item-added-works-jquery#

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="fullCalModal1" class="modal fade pull-left" 
  style="align-content: center">
    <div class="modal-dialog" style="float:left; margin-right: 1500px">
        <div class="modal-content">
            <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal"><span 
             aria-hidden="true">×</span> <span class="sr-only">close</span>
              </button>
               <h4 id="modalTitle" class="modal-title" style="color: #4caf50">
                <b>{{$order->title}}</b></h4>
            </div>
            <div id="modalBody" class="modal-body col-md-12"> 
              <div class="col-md-6">
                 <center><button type="button" class="btn btn-flat btn-success 
                  btn-md set" style="margin-bottom:50px;">SET DETAILS</button>
                 </center>
              <div class="askq" hidden>
                <label style="float:center; font-size:15px; color:black">
                  <b>&nbsp;Mode of Delivery:</b></label>
                  <select name="mode" class="mode form-control" id="mode">
                    <option value="Delivery">Delivery</option>
                    <option value="Pickup">Pick up</option>
                  </select>
             <div class="address" id="address"></div>
                   <label style="float:center; font-size:15px; color:black">
                    <b>&nbsp;Do you have any specifications?</b></label>
                  <input type='text' name="spec" class='form-control has-
                  success' style='width:250px'>
            </div>
            </div>
            </div>
            
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-
                  dismiss="modal">Close</button>
                <button type="submit" class="btn btn-success"><a id="eventUrl" 
                style="color:white" target="_blank">Save Changes</a></button>
            </div>
            </div>
        </div>
    </div>

<div id="fullCalModal2" class="modal fade pull-left" 
  style="align-content: center">
    <div class="modal-dialog" style="float:left; margin-right: 1500px">
        <div class="modal-content">
            <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal"><span 
             aria-hidden="true">×</span> <span class="sr-only">close</span>
              </button>
               <h4 id="modalTitle" class="modal-title" style="color: #4caf50">
                <b>{{$order->title}}</b></h4>
            </div>
            <div id="modalBody" class="modal-body col-md-12"> 
              <div class="col-md-6">
                 <center><button type="button" class="btn btn-flat btn-success 
                  btn-md set" style="margin-bottom:50px;">SET DETAILS</button>
                 </center>
              <div class="askq" hidden>
                <label style="float:center; font-size:15px; color:black">
                  <b>&nbsp;Mode of Delivery:</b></label>
                  <select name="mode" class="mode form-control" id="mode">
                    <option value="Delivery">Delivery</option>
                    <option value="Pickup">Pick up</option>
                  </select>
             <div class="address" id="address"></div>
                   <label style="float:center; font-size:15px; color:black">
                    <b>&nbsp;Do you have any specifications?</b></label>
                  <input type='text' name="spec" class='form-control has-
                  success' style='width:250px'>
            </div>
            </div>
            </div>
            
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-
                  dismiss="modal">Close</button>
                <button type="submit" class="btn btn-success"><a id="eventUrl" 
                style="color:white" target="_blank">Save Changes</a></button>
            </div>
            </div>
        </div>
    </div>
   

这里的任何人都可以为此提供解决方案吗？