JSFiddle - React, Tailwind, and code Playground
HTML
<button id="myBtn" class="btn">Add Entry</button>
<div id="myForm"></div>
<br/>
<button id="btnGraph" class="btn" disabled="true">Graph</button>
JavaScript
$(document).ready(function()
{
$("#myBtn").click(function()
{
addCountry();
});
$(document).on("keyup blur", "input[class^='text']", function(){
var empty = false;
$("input[class^='text']").filter(function()
{
if($(this).val().trim()=='')
empty = true;
});
$('#btnGraph').prop('disabled', empty);
});
});
var counter = 1;
var str = '';
function addCountry()
{
str = ''+counter+'. Country <input type="text" class="text" id="country-'+counter+'" onkeyup="checkCountry(this)"> Population <input type="text" class="text" id="population-'+counter+'" onkeyup="checkPopulation(this)"><br/>';
$("#myForm").append(str);
counter++;
}
function checkPopulation(ob)
{
var invalidChars = /[^0-9]/gi
if(invalidChars.test(ob.value))
{
ob.value = ob.value.replace(invalidChars,"");
}
}
function checkCountry(ob)
{
var invalidChars = /[^a-z]/gi
if(invalidChars.test(ob.value))
{
ob.value = ob.value.replace(invalidChars,"");
}
}