JSFiddle - React, Tailwind, and code Playground

by heliosh

HTML

<table>

<tr>
		<td>Persons? </td>
		<td><input class="span4 input-big" id="dare_price1" name="Persons" value=""size="30" type="text" />

      </td>
	</tr>

<tr>
		<td>Animals?</td>
		<td><input class="span4 input-big" id="dare_price2" name="Animals" value=""size="30" type="text" /></td>
		
	</tr>

<tr>
		<td>Bedlinen? </td>
		<td><input class="span4 input-big" id="dare_price3" name="Bedlinen" value=""size="30" type="text" /></td>
	</tr>
	
	<tr>
		<td>Towels? </td>
		<td><input class="span4 input-big" id="dare_price4" name="Towels" value=""size="30" type="text" /></td>
	</tr>
	
</table>

<table style="width: 50%" >
	<tr>
		<td style="width: 403px"></td>
		<td></td>
	</tr>
	<tr>
		<td style="width: 403px">Rentalprice</td>
		<td>189.00</td>
<td>Euro</td>
	</tr>
	<tr>
		<td style="width: 403px">Taxes</td>
		<td style="width: 50px" >
		<input style="border: 0px;"class="style11 span4 input-big" id="total_price_amount1" readonly="readonly" name ="PricePersons"value=""/></td>
        <td>Euro</td></tr>
	<tr>
		<td style="width: 403px"><span lang="nl">Animals</span></td>
		<td> 
		<input style="border: 0px;"class="style11 span4 input-big" id="total_price_amount2" readonly="readonly" name ="PriceAnimals"value=""/></td>
        <td>Euro</td>
	</tr>
	<tr>
		<td style="width: 403px"><span lang="nl">Bedlinen</span></td>
		<td><input style="border: 0px;"class="style11 span4 input-big" id="total_price_amount3" readonly="readonly" name ="PriceBedlinen"value=""/></td>
        <td>Euro</td>
	</tr>
	<tr>
		<td style="width: 403px"><span lang="nl">Towels</span></td>
		<td><input style="border: 0px;"class="style11 span4 input-big" id="total_price_amount4" readonly="readonly" name ="PriceTowels"value=""/></td>
        <td>Euro</td>
	</tr>
	
	<tr>
		<td style="width: 403px">Total</td>
		<td>&nbsp;  </td>
        <td>Euro</td>
	</tr>
	
	
</table>

JavaScript

$(document).ready(function()
{
    function updateArticle1()
    {
         var Persons= parseFloat($("#dare_price1").val());
         var total = (Persons) * 2.00 ;
        var total = total.toFixed(2);
        $("#total_price_amount1").val(total);
    }
    $(document).on("change, keyup", "#dare_price1", updateArticle1);
});

$(document).ready(function()
{
    function updateArticle2()
    {
        var Animals = parseFloat($("#dare_price2").val());
        var total = (Animals) * 3.50 ;
        var total = total.toFixed(2);
        $("#total_price_amount2").val(total);
    }
    $(document).on("change, keyup", "#dare_price2", updateArticle2);
});



$(document).ready(function()
{
    function updateArticle3()
    {
        var Bedlinen = parseFloat($("#dare_price3").val());
        var total = (Bedlinen) * 8.50 ;
        var total = total.toFixed(2);
        $("#total_price_amount3").val(total);
    }
    $(document).on("change, keyup", "#dare_price3", updateArticle3);
});

$(document).ready(function()
{
    function updateArticle4()
    {
        var Towels = parseFloat($("#dare_price4").val());
        var total = (Towels) * 7.50 ;
        var total = total.toFixed(2);
        $("#total_price_amount4").val(total);
    }
    $(document).on("change, keyup", "#dare_price4", updateArticle4);
});