User click more button to clone and if user click add less button to remove but here it was validting the field and remove using jquery

Question

I am facing the below issues:

If the user clicks \"next\" button before cloning, it should say you have 4 fields missing to validate. but if the user c

Answer 1

<div id="TextBoxesGroup" style="margin-bottom:4px;" class="clonedInput">/*Html code here also*/</div>

$(document).ready(function () {
    var counter = 2;
    $("#addButton").click(function () {
        var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
        newTextBoxDiv.after().html('<br><input type="text" name="ipt_Havg" id="ipt_Havg" class="ipt_Field required_field" aria-required="true" aria-invalid="false">');/*Same code paste here html*/
        newTextBoxDiv.appendTo("#TextBoxesGroup");
        counter++;
    });
    $("#removeButton").click(function () {
        if (counter == 1) {
            alert("No more File box to remove");
            return false;
        }
        counter--;
        $("#TextBoxDiv" + counter).remove();
    });
});


<div><input type='button' value='Add File' id='addButton'><input type='button' value='Remove File' id='removeButton'></div>