JSFiddle - React, Tailwind, and code Playground

by paka

HTML

<button type="button" id="addScnt" name="add_dispute">+ Add</button>
<button type="button" id="rmvScnt" name="rmv_dispute">- Remove</button>

<div id="dispDiv">
    <p>
        <label for="dispDiv">
            <input type="text" id="c_name" class="form-control" size="20" name="c_name" placeholder="c_name" />
        </label>
    </p>
</div>

JavaScript

$(function () {
    var MAX_DISPUTES = 10;
    var myDiv = $('#dispDiv');
    var i = $('#dispDiv p').size() + 1;
    

    $('#addScnt').click(function() {
        var disputesAmount = $('#dispDiv > p').length;
        
        if ( (disputesAmount + 1 ) <= MAX_DISPUTES ){
        $('<p><label for="dispDiv"><input type="text" id="c_name' + i + '" size="20" name="c_name_' + i + '" value="" placeholder="c_name" /></label<br></p>').appendTo(myDiv);
        }
        else {
          alert('Sorry, you have reached the maximum number of disputes.'+
                '\n\nMaximum number of disputes is '+ MAX_DISPUTES );
        }
         
    });

    $('#rmvScnt').click(function(){
        var last = $('#dispDiv > p').last();
        last.detach();
    });


});