JSFiddle - React, Tailwind, and code Playground

by anujay

HTML

<table class="table" border="1">
    <tr>
        <th>Cause</th>
        <th>Monthly Charge</th>
    </tr>
    <tbody id="selectedServices"></tbody>
    <tr>
        <td>Total</td>
        <td id="total">0</td>
    </tr>
</table>
<button id="submit">Submit</button>
<p>&nbsp;</p>
<table class="table" border="1">
    <tr>
        <th>Cause</th>
        <th>Monthly Charge</th>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="product[]" value="table" />
            <label>table</label>
        </td>
        <td>80</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="product[]" value="chair" />
            <label>chair</label>
        </td>
        <td>45</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="product[]" value="set" />
            <label>set</label>
        </td>
        <td>10</td>
    </tr>
</table>

CSS

.table {
    text-align:center
}

JavaScript

$(function () {
    $(":checkbox").change(function () {
        // Toggle class of selected row
        $(this).parent().toggleClass("rowSelected");

        // Get all items name, sum total amount
        var sum = 0;
        var arr = $(":checkbox:checked").map(function () {
            sum += Number($(this).parents('tr').find('td:last').text());
            return $(this).parents('tr').clone();
        }).get();

        // Display selected items and their sum
        $("#selectedServices").html(arr).find('input').remove();
        $("#total").text(sum);
    });

    $("#submit").click(

    function () {
        var causes = [];
        $("#selectedServices .rowSelected").each(function () {
            causes.push($(this).find("label").html());
        });
        console.log(causes);
    });
});