JSFiddle - React, Tailwind, and code Playground

by andrewwhitaker

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
    </head>
    
    <body>
        <div class="program-box">
            <span>You can select or deselect the radio button</span>
            <h2>Heading1</h2>
            <table class="program" cellpadding="0" cellspacing="1">
                <tr>
                    <th class="w-5"></th>
                    <th class="w-35">Name</th>
                    <th class="w-30">Location</th>
                    <th class="w-10">#days</th>
                    <th class="w-10">Price</th>
                </tr>
                <tr>
                    <td><input name=cat1 value=3 id=3 type='radio' class='v'/></td>
                    <td>categeory 1</td>
                    <td>location1</td>
                    <td>5</td>
                    <td class="price1">100</td>
                </tr>
            </table>
            <h2>Heading2</h2>
            <table class="program" cellpadding="0" cellspacing="1">
                <tr>
                    <th class="w-5"></th>
                    <th class="w-35">Name</th>
                    <th class="w-30">Location</th>
                    <th class="w-10">#days</th>
                    <th class="w-10">Price</th>
                </tr>
                <tr>
                    <td><input name=cat2 value=1 id=1 type='radio' class='v'/></td>
                    <td>category2</td>
                    <td>location2</td>
                    <td>4</td>
                    <td class="price1">200</td>
                </tr>
                <tr>
                    <td><input name=cat2 value=2 id=2 type='radio' class='v'/></td>
                    <td>category2</td>
                    <td>location3</td>
                    <td>8</td>
           ...

CSS

.active {
    background: #ccc;
}
.program {
    border:1px solid blue;
}
.program td, .program th {
    padding:10px;
    border:1px solid grey;
}
.grandTotal {
    width:200px;
    height:35px;
    font-size:18px;
    font-weight:bold;
    text-align:center;
    line-height:35px;
    background-color:#999;
    margin-top:35px;
}

JavaScript

$(document).ready(function() {
    $("input[type='radio']").mousedown(function(e) {
        var self = this;
        /* Use 'checked' property instead of wrapping in jQuery object */
        if (self.checked) {
            /* Use setTimeout with a function instead of JS string */
            setTimeout(function() {
                self.checked = false;
            }, 200);
        }
        else {
            return true;
        }
    });
    /* Assign click handler inside document.ready: */
    $(".v").click(function() {
        /* Cache selectors that are used over and over: */
        var $this = $(this);
        var $grandTotalContainer = $(".grandTotal");
        
        /* Call parseInt with radix parameter: */
        var grandTotal = parseInt($grandTotalContainer.text(), 10);
        var price =
            parseInt($this.closest('tr').find(".price1").text(), 10);
        var siblingAmounts = 0;
        var name = $this.attr("name");
        
        /* Find prices of items in the same "group": */    
        $("input[name='" + name + "'].active")
            .not($this)
            .each(function() {
                siblingAmounts += 
                    parseInt($(this).closest("tr").find(".price1").text(), 10);
            });
        
        $this.toggleClass("active");
        $("input[name='" + name + "']").not($this).removeClass("active");

        if ($this.hasClass("active")) {
            grandTotal -= siblingAmounts;
            grandTotal += price;
        }
        else {
            grandTotal -= price;
        }
        $grandTotalContainer.html(grandTotal);
    });
});