how to find the selected value from a dynamically generated multiple select tag with same name in jquery

Question

Blade File Hi, I am generating select tag of products as product_id[] deliver date as deliver_date[] & return date[] as return_date using ajax as in a booking it could be a multiple products with different delivery and return dates.

now i don't know how to select the value of the product_id[] which is dynamically generated each time so that i can do some ajax call with selected product_id value & deliver_date value.

<div class="card-body">
 <table class="table table-borderless" style="font-size: 10px" id="tblBookingDetails">
  <tbody>
     <tr>
      <td width="50%"><label class="col-form-label">Product</label>
         <select class="form-select font-12 getDepositeAndRent" aria-label="Default select example" name="product_id[]" id="product_id">       
            <option selected>Select Product</option>
             @foreach($products as $product)
                <option value="{{$product->id}}">{{$product->name}} - {{$product->code}}</option>
              @endforeach
           </select>
       </td>
       <td width="20%">
           <label for="inputText" class="col-form-label">Delivery Date</label>
           <input type="date" class="form-control font-12 checkAvalibility" name="delivery_date[]"
                      value="{{old('delivery_date')}}" id="deliveryDate">
        </td>
        <td width="20%">
           <label for="inputText" class="col-form-label ">Return Date</label>
           <input type="date" class="form-control font-12 " name="return_date[]"
                        value="{{old('return_date')}}" id="returnDate">
         </td>
         <td width="5%">
            <label for="inputText" class="col-form-label "></label>
            <div class="icon" style="font-size: 35px">
               <i class="bx bxs-message-square-add addColumn" style="color: green"></i>
             </div>
          </td>
          <td width="5%">
             <label for="inputText" class="col-form-label"></label>
             <div class="icon" style="font-size: 35px">
                <i class="bx bxs-message-square-x removeColumn" style="color:red"></i>
             </div>
           </td>
        </tr>
  </tbody>
</table>
    

Jquery Code

<script>
  

     $(document).ready(function(){
         //Adding Table row
          $("#tblBookingDetails").on('click','.addColumn',function(){
             addColumn = "<tr> <td width='50%''> "
             addColumn += "<select class='form-select font-12 getDepositeAndRent' aria-label='Default 
                            select example'name='product_id[]' id='product_id'>"
             addColumn += "<option selected>Select Product</option>"
             addColumn += "@foreach($products as $product)"
             addColumn += "<option value='{{$product->id}}''>{{$product->name}} - {{$product->code}} 
                           </option>"
             addColumn += "@endforeach </select>"
             addColumn += "<p style='color: red'>{{$errors->first('product_id')}} </p>"
             addColumn += "</td>"
             addColumn += "<td width='20%'>"
             addColumn += "<input type='date' class='form-control font-12 checkAvalibility' 
                            name='delivery_date[]' value='{{old('delivery_date')}}' id='deliverDate'>"
             addColumn += "<p style='color: red'>{{$errors->first('delivery_date')}} </p>"
             addColumn += "</td>"
             addColumn += "<td width='20%'>"
             addColumn += "<input type='date' class='form-control font-12' name='return_date[] 
                            value='{{old('return_date')}}' id='returnDate'>"
             addColumn += "<p style='color: red'>{{$errors->first('return_date')}} </p> </td>"
             addColumn += "<td width='5%'>"
             addColumn += "<div class='icon' style='font-size: 35px'>"
             addColumn += "<i class='bx bxs-message-square-add addColumn' style='color: green'></i>"
             addColumn += "</div> </td>"
             addColumn += "<td width='5%'>"
             addColumn += "<div class='icon' style='font-size: 35px'>"
             addColumn += "<i class='bx bxs-message-square-x removeColumn' style='color:red'></i>"
             addColumn += "</div></td></tr>"
             $("#tblBookingDetails").append(addColumn);
    
          });
         
     //Removing table Row
      $("#tblBookingDetails").on('click','.removeColumn',function(){
            $(this).closest('tr').remove();
         });
      });


   

    $(document).on('change','.getDepositeAndRent',function(e) {
          var totalDeposite = 0;
          var totalRent = 0;
          var productId = $(this).val();
          $.ajax({
             type: "get",
             url: "/product/depositeandrent/" + productId,
             success: function (response) {
                totalDeposite = Number($('#deposite').val()) + Number(response.deposite);
                totalRent = Number($('#rent').val()) + Number(response.rent);
                $('#deposite').val(totalDeposite);
                $('#rent').val(totalRent);
    
             }
          });
       });

**Ajax Code where i want help**
  

     $(document).on('change','.checkAvalibility', function(e){
          date = new Date($('#deliveryDate').val());
          var day = date.getDate();
          var month = date.getMonth() + 1;
          var year = date.getFullYear();
          date = [day, month, year].join('/')
          **// productId = how to find the product Id.....????????**
          $.ajax({
             type: "get",
             url: "/booking/details/checkAvalibility/" + date + productId,
             data: "data",
             dataType: "dataType",
             success: function (response) {
             }
          });
       });
    </script>