JSFiddle - React, Tailwind, and code Playground

by jyrkim

HTML

<div class="ui-collapsible-content ui-body-a" aria-hidden="false">
            <div class="TreeMenu_Content" id="itemcontent703">
               <div class="lastItm_Wrap">
                  <div class="Itm_left_aside">
                     <div class="Itm_dtsl">
                        <h3 data-sellprice="12" data-discprice="0" data-strikeprice="12">Item1<button style="display:none;" class="btn-d icon-ellipsis prdDiscription ui-btn ui-shadow ui-corner-all"></button></h3>
                        <div class="Qty_Wrap">
                           <button class="btn-d icon-minus QtyBtn ui-btn ui-shadow ui-corner-all">-</button><div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input type="text" class="QtyInput" value="0"></div>
                           <button class="btn-d icon-plus QtyBtn ui-btn ui-shadow ui-corner-all">+</button>                                                            
                        </div>
                     </div>
                  </div>
                  <div class="Itm_right_aside">
                     <p style="display:none;"><strike class="strikeprice">12</strike> <b class="discprice">0 </b></p>
                     <p><b class="sellprice"> 12</b></p>
                     <p style="display:none;"><span>Additions:</span>  <b>₹ 30</b></p>
                  </div>
               </div>
               <div style="display: none;" id="addonsWrap-placeholder">
               </div>
            </div>
            <div class="TreeMenu_Content" id="itemcontent693">
               <div class="lastItm_Wrap">
                  <div class="Itm_left_aside">
                     <div class="Itm_dtsl">
                        <h3 data-sellprice="188" data-discprice="12" data-strikeprice="200">Kool<button style="display:none;" class="btn-d icon-ellipsis prdDiscription ui-btn ui-shadow ui-corner-all"></button></h3>
                        <div class="Qty_Wrap">
                           <button class="btn-d icon-minus...

CSS

.pageMidLogo {
    width:100%;
    float:left;
    text-align:center;
}
.createAccountWrap {
    width:100%;
    float:left;
    height:auto;
    padding:20px;
}
.createAccountWrap .h3_head {
    float: left;
    text-align: center;
    width: 100%;
    margin-bottom: 25px !important;
}
.iLabel {
    font-size: 13px;
    line-height: 16px;
    width: 100%;
    float: left;
}
.insideInput {
    width:100%;
    float:left;
    position:relative;
}
.tooltipIcon {
    width: 27px;
    height: 27px;
    position: absolute;
    right: 8px;
    top: 16px;
    background: #ababab;
    -webkit-border-radius: 25px;
    border-radius: 25px;
}
.tooltipIcon:before {
    font-size: 19px;
    margin-top: 4px;
    color:#fff;
}
.pop_tooltipIcon {
    font-size: 36px;
    text-align: center;
    width: 100%;
    float: left;
    margin-bottom: 10px;
    color:#d03e43;
}
.iconPinReload {
    /*background: url(../images/icon-capthareload.png) 10px 10px no-repeat #f6f6f6;
	border-left: 1px solid #ddd;
	width: 52px;
	height: 41px;*/
    position: absolute;
    top: -20px;
    right: 0px;
    cursor: pointer;
    font-size: 15px;
}
/*.iconPinReload:hover{
	background: url(../images/icon-capthareload.png) 10px 10px no-repeat #f0f0f0;
}*/
 .tpMenuWrap {
    position:absolute;
    top:0px;
    width: 88%;
}
.btMenuWrap {
    position:absolute;
    bottom:0px;
    width: 88%;
}
.ul_menu {
    padding:0px;
    margin:0px;
    width:100%;
    list-style:none;
}
.ul_menu li {
    padding: 10px 0px;
    margin: 0px;
    width: 100%;
    list-style: none;
    font-size: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ul_menu li a {
    font-weight: 500;
    color:#ddd;
}
.ul_menu li a:hover {
    color:#fff;
}
.panelCloseBtn {
    float: right;
    margin-bottom: 15px;
    width: 100%;
    text-align: right;
    margin-top: 15px;
    font-size: 20px;
    color: #777 !important;
}
.panelCloseBtn:hover {
    color: #999 !important;
}
.homeListMenuWrap {
    padding:0px...

JavaScript

// When clciked on Minus Icon

$(document).on('click', '.icon-minus', function (e) {
    var value = parseInt($(this).closest('div').find('.QtyInput').val());
    if(value>=1)
    {
       $(this).closest('div').find('.QtyInput').val(value-1);
       reducequantitytoMyordersfooter();
       var currentsellprice =  parseFloat($(this).parent().prev().data('sellprice')); // get the data "price" of item
       var currentquantity =parseInt($(this).closest('div').find('.QtyInput').val());
       var subtotalvalue = parseInt($(".myOrderPanel_footer .subtotal").data('subtotal'));
       subtotalvalue = subtotalvalue - currentsellprice ;
        $(".myOrderPanel_footer .subtotal").data('subtotal',subtotalvalue);
        $(".myOrderPanel_footer .subtotal").text(subtotalvalue)
        if(value>=2)
        {
        $(this).closest('.lastItm_Wrap').find('.Itm_right_aside .sellprice').text(currentsellprice*currentquantity);
    }
    }
    displaylogicforfooter();
});

//  When clciked on Plus Icon

$(document).on('click', '.icon-plus', function (e) {
        var value = parseInt($(this).closest('div').find('.QtyInput').val());
        $(this).closest('div').find('.QtyInput').val(value+1);
        var currentsellprice =  parseFloat($(this).parent().prev().data('sellprice')); // get the data "price" of item
        var currentquantity =parseInt($(this).closest('div').find('.QtyInput').val());
        $(this).closest('.lastItm_Wrap').find('.Itm_right_aside .sellprice').text(currentsellprice*currentquantity);
        if(currentquantity>=1)
        {
        addquantitytoMyordersfooter();
        var subtotalvalue = parseInt($(".myOrderPanel_footer .subtotal").data('subtotal'));
        subtotalvalue = subtotalvalue + currentsellprice ;
        $(".myOrderPanel_footer .subtotal").data('subtotal',subtotalvalue);
        $(".myOrderPanel_footer .subtotal").text(subtotalvalue)
        }
         displaylogicforfooter();
});


function addquantitytoMyordersfooter()
{
            var...