Show product details in Bootstrap Modal: Laravel 5.6

Hi!

// 1. press on the button
// 2. send an ajax request to some end  point like /product/product_id
// 3. on success open modal with bind*ed data

// basic example
document.querySelector('button').addEventListener('click', function(e) {
    e.preventDefault();
    fetch('/product/'+ this.id)
        .then(function(response) {
              document.querySelector('title-modal').val = response.title;
              document.querySelector('price-modal').val = response.price;

              modal.open();
        });
});

This is not going to work, just basic example

@foreach($products as $product)
    <button id="{{ $product->id }}">VIEW</button>
@endforeach 

<script>

let btns = document.querySelectorAll('button');

btns.forEach(function (btn) {
    btn.addEventListener('click', function () {
        console.log(btn.id);
        let id = btn.id;

        document.querySelector('model-title').value = "{{ $products[id]->title }}"
        modal.open();
    })
})
</script>