JSFiddle - React, Tailwind, and code Playground

by Al Kasih

HTML

<ul id="yourlist" style="display:inline-block; overflow:hidden;">
    <li>
        <img src="indonu-image/hitam.jpg" />
        <p class="content-p"><span class="product-name">Forbiden Rice</span>

            </br>	<span class="content-pp"><span class="content-info">Product One</span>

            </br><span class="price-info">200.000</span>
</span>
        </p>
        <div class="spanish">	<span>
                    <a href="#">Add to bag</a></span> 	<span>Buy</span>

        </div>
    </li>
    <li>
        <img src="indonu-image/hitam.jpg" />
        <p class="content-p"><span class="product-name">Not Forbiden Rice</span>

            </br>	<span class="content-pp"><span class="content-info">Product Two</span></span>
            </br><span class="price-info">200.000
					</span>

        </p>
        <div class="spanish">	<span>
                    <a href="#">Add to bag</a></span> 	<span>Buy</span>

        </div>
    </li>
</ul>
<!--Pop Up Div-->
<div id="light" class="white_content">
    <div id="headerLightBox">Berikut kami tampilkan bon belanja Anda hari ini. Pastikan seluruh spesifikasi sesuai dengan kebutuhan Anda.</div>
    <table id="tableInformation" cellspacing="0">
        <tr id="headerTableInformation">
            <td>Product Name</td>
            <td>Description</td>
            <td>Price</td>
        </tr>
        <tr id="contentTableInformation">
            <td id="productName-content"></td>
            <td id="description-content"></td>
            <td id="priceContent"></td>
        </tr>
    </table>
    <div id="buttonWrapper">
        <p id="processBlocked">	<a href="#">Processed</a>

        </p>
        <p id="closeBlocked"> <a href="#">Cancel</a>

        </p>
        <p id="expired">Pesanan Anda akan expired pada tanggal:</p>
    </div>
</div>

CSS

#toBag {
    background-color: rgb(51, 204, 153);
    width: 130px;
    text-align: center;
    padding: 15px 25px 15px 25px;
    margin-top: 20px;
    color: black;
    text-shadow: none;
    font-size: 16px;
    margin-bottom: 10px;
}
.black_overlay {
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:10000001;
    -moz-opacity: 0.8;
    opacity:.75;
    filter: alpha(opacity=80);
}
.white_content {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    opacity:.90;
    width: 96%;
    background-color: white;
    z-index:10000002;
    overflow: auto;
    padding: 1% 2% 12px 2%;
    margin: 0;
}
#size-content {
    overflow: hidden;
    position: relative;
}
#warna-content {
    overflow: hidden;
    position: relative;
}
#buttonWrapper {
    display: block;
    overflow: hidden;
    float: left;
    position: relative;
    width: 100%;
    text-align: right;
    margin: 0;
}
#closeBlocked, #processBlocked {
    display: block;
    overflow: hidden;
    float: right;
    position: relative;
    text-align: right;
    margin: 20px 10px 0 0;
    padding: 5px 10px 5px 10px;
    background: rgb(47, 185, 183);
    color: #FFF;
}
#closeBlocked a, #processBlocked a {
    color: #FFF;
    text-shadow: none;
}
#expired {
    color: #000;
    text-shadow: none;
    float: left;
    margin: 20px 10px 0 0;
    padding: 5px 10px 5px 10px;
}
#tableInformation {
    overflow: hidden;
    width: 100%;
}
#headerTableInformation {
    background: rgb(47, 185, 183);
    color: #FFF;
    font-weight: bold;
    text-align: center;
    padding: 0;
    margin: 0;
}
#headerTableInformation td {
    text-align: center;
    color: #FFF;
    text-shadow: none;
}
#contentTableInformation {
    background: white;
    color: #FFF;
    font-weight: bold;
    text-align: center;
    padding: 0;
    margin: 0;
}
#contentTableInformation td {
    background-color: #FFF;
    color: #000;
   ...

JavaScript

$(".spanish").on('click', 'a', function (e) {
    // get the product details container
    var $product_container = $(this).closest('.spanish').prev('.content-p');
    var $product_name = $product_container.find('.product-name').text();
    var $product_info = $product_container.find('.content-info').text();
    var $product_price = $product_container.find('.price-info').text();

    $('#productName-content').text($product_name);
    $('#description-content').text($product_info);
    $('#priceContent').text($product_price);

    $('#fade').fadeOut();
    $('#light').fadeIn();
    e.preventDefault();
});
$('#processBlocked a').on('click', function (e) {
    $('#secondLight').fadeIn();
    $('#light').fadeOut();
    $('#fade').fadeIn();
    e.preventDefault();
});
$('#closeBlocked a').on('click', function (e) {
    $('#light').fadeOut();
    $('#fade').fadeIn();
    e.preventDefault();
});