JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<div class="dude" style="margin-bottom:4px;">Name:
    <input type="text" name="name1" />
</div>
<div class="dude" style="margin-bottom:4px;display:none">Name:
    <input type="text" name="name1" />
</div>
<div class="dude" style="margin-bottom:4px;display:none">Name:
    <input type="text" name="name1" />
</div>
<div class="dude" style="margin-bottom:4px;display:none">Name:
    <input type="text" name="name1" />
</div>
<button id="btnAdd">Add More</button>
<button id="btnDel">Delete</button>

JavaScript

$("#btnAdd").click(function () {
    $('div.dude:hidden').first().show();
});

$("#btnDel").click(function () {
    $('div:visible').last().hide();
});