JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<p class="text" id="first_one">This is the first text</p>
<p class="text" id="second_one" style="display:none">This is the second text</p>
<p class="text" id="third_one" style="display:none">This is the third text</p>
<p class="text" id="fourth_one" style="display:none">This is the four text</p>


<div id="first_one" style="margin-bottom:4px;" class="text">Name: <input type="text" name="name1" id="name1" /></div>
<div id="second_one" style="margin-bottom:4px;display:none" class="text">Name: <input type="text" name="name1" id="name1" /></div>
<div id="third_one" style="margin-bottom:4px;display:none" class="text">Name: <input type="text" name="name1" id="name1" /></div>
<div id="fourth_one" style="margin-bottom:4px;display:none" class="text">Name: <input type="text" name="name1" id="name1" /></div>

<button id="slider1next">Add</button>

JavaScript

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