Jquery not triggering ajax on change

Question

I have a piece of jQuery I have used before but now I cant seem to get it to trigger. No idea why, I have changed it about and cant get it to trigger.

I am trying to get the product_details select to trigger the jQuery when the option is changed to trigger some ajax

HTML

   <form class="search-form">
      <div class="form-group inputwithicon ">
        <i class="lni-menu"></i>
        <div class="select" id="select" >
          
        <select class="product_details" id="product_details">
          <option value="">Gun Type</option>
          <?php 
                try{
                    foreach ($product_details_get as $product_details_row) {
                    $product_details = $product_details_row['product_description'];
                    $product_details_id = $product_details_row['product_details_id'];
                    echo('<option value="'.$product_details_id.'">'.$product_details.'</option>');
                    }
                  }
                  catch (Exception $e) { 
                    header("Location: 404.php?error=".$e->getMessage());
                    exit;
                  }
              ?>
          </select>


        </div>
      </div>
      <div class="form-group inputwithicon ">
        <i class="lni-menu"></i>
        <div class="select">
          <select id="calibre">
            <option value="none">Select Gun Type</option>
    
          </select>
        </div>
      </div>
      <div class="form-group inputwithicon">
        <i class="lni-map-marker"></i>
        <div class="select">
          
          <input   class="form-control" id="locationsearch" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" />
          
        </div>
      </div>
      <p> </p><button class="btn btn-common" type="button"><i class="lni-search"></i> Search Now</button>
    </form>
  </div>
</div>

JS

$('.product_details').change(function() {
  $.ajax({
    type: "POST",
    url: "include_home_page/home_page_data_get/product_details_get.php",
    data: {
    },
    dataType: 'json',
    beforeSend: function() {

    },
    success: function(data) {
      /*get response as json */
    }
  });
});

I know these question have been asked a lot but I can't seem to find anything that works.

Any pointers would be very helpful.

Thanks,

Richard