JSFiddle - React, Tailwind, and code Playground

by riverguy

HTML

<form id="nepForm">


<p class="title">Kayak Raffle!</p>
<p class="title">Tickets $5 each or three for $12</p>

<div class="formRow">
<p class="formRow formHead col1">Ticket Type(s)</p>
<p class="formRow formHead col2 mid">Qty</p>
<p class="formRow formHead col3 end">Total</p>
</div>

<div>
<p class="formRow col1">3-Ticket Bundles @ $12 Each</p>
<p class="formRow col2"><input id="threePakQty" class="inp" type="number" name="threePakQty" value="0"></p>
<p class="formRow col3" id="threePakTot">$0</p> 
</div>

<div>
<p class="formRow col1">Single Tickets @ $5 Each</p>
<p class="formRow col2"><input id="singleQty" class="inp" type="number" name="SingleQty" value="0"></p>
<p class="formRow col3" id="singleTot">$0</p> 
</div>

<hr>

<div>
<p class="formRow col1 formHead">Total Tickets / Total Cost</p> 
<p class="formRow col2 formHead" id="ticketCountTot">0</p> 
<p class="formRow col3 formHead" id="purchaseTot">$0</p> 
</div>

</form>

CSS

#nepForm {
Width: 410px;
}
p.title {
text-align:center;
font-weight:bold;
}
p.formRow{
display:inline-block;
height: .5em
}
.formHead {
font-weight: bold;
}

.col1 {
width:200px;
}
.col2 {
width: 100px;
text-align: right;
}
p.col2.mid {
width: 100px;
}
p.col3.end {
width: 100px;
}
.col3 {
width: 100px;
text-align: right;
}
.col2.formHead{
width:83px;
}
.col3.formHead{
width:117px;
}
.inp {
width: 30px;
text-align: right;
}

JavaScript

$(document).ready(function() {

$("#singleQty, #threePakQty").on('keyup change', function(){

    var sQty = parseInt($("#singleQty").val(),10);
    var pakQty = parseInt($("#threePakQty").val(),10);
   
    
      
    $("#singleTot").text(function(){
    return("$"+ (""+(sQty * 5)));
    })
    
    $("#threePakTot").text(function(){
    return("$"+ (""+(pakQty * 12)));
    })
    
    $("#ticketCountTot").text(function(){
    return( ""+(sQty+(pakQty*3)) );
    })
    
    $("#purchaseTot").text(function(){
    return( "$"+(""+((sQty*5)+(pakQty*12))) );
    })
      
});

});