JSFiddle - React, Tailwind, and code Playground

by Vipin Patil

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="inner-img-content-wrapper">
    <div id="sliverdiv_outer" class="check-pin-container">
        <div class="col-sm-2 col-xs-12">


            <input type="checkbox" name="si" plate="" in="" pair="" id="sl1" value="3000">Silver</div>
        <div class="si sli col-sm-8 col-xs-12">
            <div class="col-sm-4">
                <input type="checkbox" class="clssliv chk" id="sl1-1" value="1" checked>Dinner Plate in Pair
                <input type="text" id="sl1-1_text" value="123,345,678">
            </div>
            <div class="col-sm-4">
                <input type="checkbox" class="clssliv chk" id="sl1-2" value="1" checked>Beer-Cum-Juice Mug (BOUNCER)
                <input type="text" id="sl1-2_text">
            </div>
            <div class="col-sm-4">
                <input type="checkbox" class="clssliv chk" id="sl1-3" value="1">Solo Plates
                <input type="text" id="sl1-3_text">
            </div>
        </div>
        <div style="clear:both;"></div>
    </div>
    <!--sliver div end-->
    <!--golden div start-->
    <div id="golddiv_outer" class="check-pin-container">
        <div class="col-sm-2 col-xs-12">
            <input type="checkbox" name="go" plate="" in="" pair="" id="gl1" value="5000">Gold</div>
        <div class="go gld col-sm-8 col-xs-12">
            <div class="col-sm-4">
                <input type="checkbox" class="clsgld chk" id="gl1-1" value="1">Dinner Plate in Pair
                <input type="text" id="gl1-1_text">
            </div>
            <div class="col-sm-4">
                <input type="checkbox" class="clsgld chk" id="gl1-2" value="1">Beer-Cum-Juice Mug (BOUNCER)
                <input type="text" id="gl1-2_text">
            </div>
        </div>
        <div style="clear:both;"></div>
    </div>
    <!--golden div end-->
    <!--dimond div start-->
    <div id="dimddiv_outer"...

JavaScript

$(document).ready(function(){

    $( "input[id$='_text']" ).each(function() {
	if($(this).val()=="")
	{

		$(this).attr("disabled", "disabled"); 	
	}
});
    
    
	function getProducts(mydiv) { 
		var totalcost=0;
		 $('.' + mydiv + ' input:text').each(function () {
					     
					    if (   $(this).val()!="")  {
					         
					 mydivpin = ($(this).val()).split(',');
					 //Remove Empty Values   
					  mydivpin = $.grep(mydivpin, function(n){ return (n); });   
					  console.log(mydivpin);

					   
					    $('input[name="'+mydiv+'"]').each(function () {
					      //alert();
					        					        totalcost=totalcost+mydivpin.length*$(this).val();			      
   						});
					            }					          
					        });
		 	return totalcost;   
		 	}
		 	window.Calcu=function() {
		 		t1= getProducts("si");
		 		t2= getProducts("go");
		 		t3= getProducts("di");
 $("#totalcost").val(parseFloat(t1)+parseFloat(t2)+parseFloat(t3));
    }


$( ".chk" ).click(function() {

	if ($('#' + this.id).is(":checked"))
	{	$("#"+this.id+"_text").removeAttr("disabled"); }
	else
	{		$("#"+this.id+"_text").attr("disabled", "disabled"); 	
	}	
});





});