JSFiddle - React, Tailwind, and code Playground

by gandjyar

HTML

<div class="group-data">
    <div id="product_0" name="product_0">
        <div data-type="Service 0">Service 0
            <input id="servicename_0" name="servicename_0" type="hidden" value="Service 0"></input>
            <input id="serviceprice_0" name="serviceprice_0" type="hidden" value="$100.00"></input>
            <input id="hdiscount_0" name="hdiscount_0" type="hidden" value="$20.00"></input>
        </div>
    </div>
    <div class="cknow" align="center" valign="top">
        <label class="addremove">Add/Remove
            <input type="checkbox" class="hideme" id="ckNow_0" name="ckNow[0]"></input>
        </label>to Checkout
        </div></div>
<div class="group-data">
    <div id="product_1" name="product_1">
        <div data-type="Service 1">Service 1
            <input id="servicename_1" name="servicename_1" type="hidden" value="Service 1"></input>
            <input id="serviceprice_1" name="serviceprice_1" type="hidden" value="$300.00"></input>
             <input id="hdiscount_1" name="hdiscount_1" type="hidden" value="$40.00"></input>
        </div>
    </div>
    <div class="cknow" align="center" valign="top">
        <label class="addremove">Add/Remove
            <input type="checkbox" class="hideme" id="ckNow_0" name="ckNow[1]"></input>
        </label>to Checkout</div>
</div>
<div class="group-data">
    <div id="product_2" name="product_2">
        <div data-type="Service 2">Service 2
            <input id="servicename_2" name="servicename_2" type="hidden" value="Service 2"></input>
            <input id="serviceprice_2" name="serviceprice_2" type="hidden" value="$400.00"></input>
             <input id="hdiscount_2" name="hdiscount_2" type="hidden" value="$60.00"></input>
        </div>
    </div>
    <div class="cknow" align="center" valign="top">
        <label class="addremove">Add/Remove
            <input type="checkbox" class="hideme" id="ckNow_2" name="ckNow[2]"></input>
        </label>to Checkout</div>
</div>
<div...

CSS

.cknow {
    text-align:left;
}
.group-data {
    margin:40px 0;
    border:solid 1px #ccc;
    width:100%;
}
.sidebar-service {background:red;width:100%;}
.btm-row {background:#ccc;width:100%;}

JavaScript

jQuery(function ($) {
    var tmpl = '<div class="sidebar-service-price">\
    <div class="one-half">\
        <p class="alignleft lblServiceName"><span></span>\
            <input type="hidden" class="servicename" value="0"></input>\
        </p>\
    </div>\
    <div class="one-half">\
        <p class="alignright lblServicePrice"><span></span>\
            <input type="hidden" class="serviceprice" value="0"></input>\
        </p>\
    </div>\
</div>'

    $('input[id^=ckNow_]').change(function () {
        if (this.checked) {
            var $group = $(this).closest('.group-data');
            var $el = $(tmpl).attr('data-id', this.id.match(/\d+$/)[0]);
            $el.find('.lblServiceName span').text($group.find('input[id^=servicename_]').val());
            $el.find('.lblServicePrice span').text($group.find('input[id^=serviceprice_]').val());
            $el.appendTo('.sidebar-service');
            
            var standardprice = parseFloat($('#hsprice_'+this.id.split('_')[1]).val());
						var price =  parseFloat($('#hprice_'+this.id.split('_')[1]).val());
						var discount =  parseFloat($('#hdiscount_'+this.id.split('_')[1]).val());
						var deposit =  parseFloat($('#hdeposit_'+this.id.split('_')[1]).val());
						
						var currSprice = parseFloat($('#hTotalSprice').val());
						var currPrice = parseFloat($('#hTotalPrice').val());
						var currDiscount = parseFloat($('#hTotalDiscount').val());
						var currDeposit = parseFloat($('#hTotalDeposit').val());
            
            currSprice += standardprice;
						currPrice += price;
						currDiscount += discount;
						currDeposit += deposit;
            
           ...