JSFiddle - React, Tailwind, and code Playground

by Santharam N R

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('#my_div').click(function() {
$('#my_value_1').val("100");
$('#my_value_1_div').html( "100" );
$('#my_div').click(addNumbers('total'));
});
});

$(document).ready(function(){
$('#my_div_2').click(function() {
$('#my_value_2').val("200");
$('#my_value_2_div').html( "200" );
$('#my_div_2').click(addNumbers('total'));
});
});

function addNumbers()
{
var val1 = parseInt(document.getElementById("my_value_1").value);
var val2 = parseInt(document.getElementById("my_value_2").value);
var ansD = document.getElementById("total");
ansD.value = val1 + val2;
    $('#total_div').text(ansD.value);
}
</script>

 <h2>My pretty front end</h2>

<div id="my_div">ADD THIS VALUE 1</div>

<div id="my_div_2">ADD THIS VALUE 2</div>

VALUE 1: <div id="my_value_1_div">VALUE 1 GOES HERE</div>

VALUE 2: <div id="my_value_2_div">VALUE 2 GOES HERE</div>

TOTAL: <div id="total_div">SUM MUST GO HERE</div>

<h2>My hidden Form</h2>

Value 1: <input type="text" id="my_value_1" name="my_value_1" value="0"/>
Value 2: <input type="text" id="my_value_2" name="my_value_2" value="0"/>
<input type="button" name="Sumbit" value="Click here" onclick="javascript:addNumbers()"/>
Total: <input type="text" id="total" name="total" value=""/>