The first input field is for a person's name and then three fields come up where a user is to enter the ingredient name, price and percentage.
But if you click inside one of the three input fields and navigate away without entering anything, another row of three fields come up.
How do I change so that it so that it only adds more fields when something is entered in any of the three previous fields?
And if I were to add the information that's been submitted on the fields to the ul ingredients, how would I go as to doing so?
$(document).ready(function () {
$(document).on("focusout", ".ration, .percentage", function () {
var count = $('.newtextbox').length;
var percent = 0;
$(".percentage").each(function (i) {
var pc = parseInt($(this).val().replace(/%/g, ""));
if (!isNaN(pc)) {
percent += pc;
}
});
if (percent == 100) {
alert('You Have Reached 100%');
} else if (percent > 100) {
alert('You Are Over 100%');
} else if (count < 10) {
$(content).append("<p><input type='text' class='newtextbox' id='ingredient" + count + "' placeholder='ingredient name'/> <input type='text' class='costPerTon' placeholder='cost per ton'/> <input type='text' class='percentage' placeholder='percent applied'/> <input type='button' value='Remove' id='removeButton" + count + "'/></p>");
} else {
alert('You have maximum elements allowed.')
}
$("input[type = 'button']").click(function () {
$(this).parent().remove();
});
});
});