Getting data from controller to the view Laravel with Javascript

I'm trying to get a selected product(id) from view to controller but it only shows the first product(id). So I have a loop of products which shows image of each product what I want is when a user select any image it should send the id according to the selected product. So far it only pick the first product id even if I click the last product(image) or any different image it only send the first product id. How can I fix this?

Blade

  @foreach($products as $product)
    @if(count($product->ProductsPhoto))
    <a  href="javascript:;" class="view-product" >
    <img src="" alt=""  >
      </a>
   @else
        @endif
    @endforeach

Javascript

<?php  $id = $product->id; ?>
<script>
  $('.view-product').on("click", function(event) {
  $("#view-product").modal('show');
  $.ajax({
    url: '',
    type: 'GET',
    dataType: 'json',
  }).done(function(response) {
    console.log('received this response: '+response);
  });
});

</script>

Route

Route::get('view-product/{id}', 'HomeController@viewProduct')->name('view.producT');

Controller

public function viewProduct($id)
{
  dd($id);
}

via Chebli Mohamed