JSFiddle - React, Tailwind, and code Playground

HTML

<div id="send_cart">
    <form method="post" action="">
        <div class="borderline"></div>
        <div id="cart_listing">
            
            
            <div id="cart_items"></div>
            
            
<table cellspacing="2" cellpadding="0" border="0" width="307">
            <tr>
                <td width="190" valign="top" align="left">
                    <div class="faster" data-val="10">Discount</div>
                </td>
                <td width="70" valign="top" align="center">
                    <div class="discounted" data-val="25">-10 €</div>
                </td>
            </tr>
        </table>
        <table cellspacing="2" cellpadding="0" border="0" width="307">
            <tr>
                <td width="100" valign="top" align="left">
                    <div class="faster" data-val="10">Faster delivery</div>
                </td>
                <td width="100" valign="top" align="center"> <span class="cart_eta">(2b. days) 
                    <?php 
                    $date = date('d M');
                    $date = strtotime($date);
                    $date = strtotime("+2 day", $date);
                    echo date('M dS', $date);
                    ?>
                </span>

                </td>
                <td width="70" valign="top" align="center">
                    <div class="product_total_cost faster" data-val="10">10 €</div>
                </td>
            </tr>
        </table>
        <div class="cart_listing_end">
            <table cellspacing="2" cellpadding="0" border="0" width="320">
                <tr>
                    <td width="150" valign="middle">
                        <div class="procental_off discount" data-val="25">-25%</div>
                        <div class="cart_total_cost" id="total">10 €</div>
                    </td>
                    <td width="70" valign="middle" align="center">
                        <div class="cart_clear">Clear</div>
                    </td>
      ...

JavaScript

$(document).ready(function ($) {
    $('#cart_listing .quantity').change(function (event) {
        $quan = $(this);
        console.log($quan.parent().next()[0]);
        $quan.parent().next().find('.price').text(function () {
            return $quan.val() * parseInt($(this).attr('data-val'), 10) + ' €';
        });
        var total = 0;
        $('#cart_listing .price').each(function (k, v) {
            total += parseFloat($(v).text(), 10);
        });

        $('#cart_listing .faster').text(function () {
            faster = parseInt($(this).attr('data-val'), 10);
            return $(this).attr('data-val' + ' €');
        });

        var discount_pct = parseInt($("#cart_listing .discount").data("val"), 10);
        var discount = -(total * discount_pct / 100);

        $('#cart_listing .discounted').text('-' + -discount + ' €');
        $('#cart_listing #total').text(total + discount + faster + $test2 + ' €')
    });

    $('input[type=checkbox]').click(function () {
        var checked = [];
        // Get a list of all currently checked items
        $('input[type=checkbox]').each(function () {
            if ($(this).is(":checked")) {
                checked.push($(this).attr('name'));
            }
        });
        buildCart(checked);
    });
});

function buildCart(checked) {
    // This one just builds the sidebar on demand. Quite useful if cart contents can be
    // updated many ways (eg in another tab).

    $("#cart_items").empty();
    //For each checked item, add a sidebar element
    for (var i = 0; i < checked.length; i++) {
        //build cart item as appropriate.
        var newItem = $("<div>");

        /* Code below here is nasty
        You shouldn't be storing values in html data and then having to pull them out. Store them in an object in Javascript so that they can be retrieved and manipulated easily. Eg:
        
        var Products = [{"Name": "Item1", "Price": 2.5}, {"Name": "Item2", "Price": 2.53}]
        
       ...