JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<input type="button" id="btnAdd" value="add another name" />
<input type="button" id="btnDel" value="remove name" />
</div>
<div class="clonedInput">
Link: <input type="text" name="link1" />
</div>
<br><br><br><br>
JavaScript
$(document).ready(function () {
$( '#btnAdd' ).click( function() {
var num = $(".clonedInput").length; // how many "duplicatable" input fields we currently have
var newNum = new Number( num + 1 ); // the numeric ID of the new input field being added
var newElem = $( '.clonedInput:last').clone();
newElem.children( ':first' ).attr( 'name', 'link' + newNum );
$( '.clonedInput:last').after( newElem );
$( '#btnDel' ).attr( 'disabled', false );
if ( newNum == 5 )
$( '#btnAdd' ).attr( 'disabled', 'disabled' );
});
$( '#btnDel' ).click( function() {
var num = $('.clonedInput').after().length;
$( '.clonedInput:last').remove(); // remove the last element
$( '#btnAdd' ).attr( 'disabled', false ); // enable the "add" button
// if only one element remains, disable the "remove" button
if ( num-1 == 1 )
$( '#btnDel' ).attr( 'disabled', 'disabled' );
});
$( '#btnDel' ).attr( 'disabled', 'disabled' );
});