JSFiddle - React, Tailwind, and code Playground

by lshettyl

HTML

<input type="bound" name="ibox1" /><br /><br />
<input type="bound" name="ibox2" /><br /><br />
<input type="bound" name="ibox3" /><br /><br />
<input type="bound" name="ibox4" /><br /><br />
<input type="bound" name="ibox5" />
<br/>
<button class="more" style="cursor: pointer">Show More</button>

CSS

input[type="bound"] {
    display: none;
}

JavaScript

var $inputs = $("input[type='bound']");
count = 0;
$inputs.first().show();

$(".more").on("click", function(e) {
    e.preventDefault();
    count++;
    $inputs.filter(":eq("+count+")").show();
    if ($inputs.length === count + 1) {
        $(this).hide();
    }
});