Price Alert:How to pass price product from a list of profucts to a popup?

I’m having a list of specific products,foreach product I have a button Create Price Alert.When I click on the button a pop up shows up and contains the price of the current product :

<link href="{{ asset('../web/main.css') }}" rel="stylesheet">

<h1>Products</h1>
<table border="1">
    <tr>
        <td>Name</td>
        <td>Image</td>
        <td>Brand</td>
        <td>Category</td>
        <td>URL</td>
        <td>Shop</td>
    </tr>
    {% for product in products %}
        <tr>
            <td>{{product.name}}</td>
            <td><img src="{{product.image}}" ></td>
            <td>{{product.brand}</td>
            <td>{{product.category}}</td>
            <td>{{product.url}}</td>
            <td>{{product.shop}}</td>
            <td><div class="box"><a class="button" href="#popup1">Create a price Alert</a></div>
   </td>
        <div id="popup1" class="overlay">
            <div class="popup">

                <h4>We will keep you updated</h4>
                <h4>Actual Price</h2> ???<br>       <a class="close" href="#">&times;</a>
                    <h4>Desired amount</h4><input type="text" name="montant_souhaite" ><br>

            </div>
        </div>

    </tr>  

{% endfor %}    

</table>    

Answer

Are you using a lib to handle the popup, or are you using custom JS ?

If this is custom JS, there is many ways to do this, one of these being, adding a “data-price” attribute to your <tr> containing the price, and a “price” class to a <span> tag around the price in your popup.

Then, you can do this for example :

$('.box button').on('click', function(){
      $('#popup1 .price').html($(this).parents('tr').first().data('price'));
   }
);

Your html would look like this :

<link href="{{ asset('../web/main.css') }}" rel="stylesheet">

<h1>Products</h1>
<table border="1">
    <tr>
        <td>Name</td>
        <td>Image</td>
        <td>Brand</td>
        <td>Category</td>
        <td>URL</td>
        <td>Shop</td>
    </tr>
    {% for product in products %}
        <tr data-price='{{ product.price }}'>
            <td>{{product.name}}</td>
            <td><img src="{{product.image}}" ></td>
            <td>{{product.brand}</td>
            <td>{{product.category}}</td>
            <td>{{product.url}}</td>
            <td>{{product.shop}}</td>
            <td><div class="box"><a class="button" href="#popup1">Create a price Alert</a></div>


            </td>
        <div id="popup1" class="overlay">
            <div class="popup">

                <h4>We will keep you updated</h4>
                <h4>Actual Price</h2> <span class='price'>???</span><br>       <a class="close" href="#">&times;</a>
                    <h4>Desired amount</h4><input type="text" name="montant_souhaite" ><br>



            </div>
        </div>

    </tr>  


{% endfor %}    

</table> 

If you are using a lib, see the doc, there is offen callbacks features available to add custom process to it.