JSFiddle - React, Tailwind, and code Playground

by Yogesh Salgar

HTML

<div class="grid1">
	<h5>Div Quantity <input id="divs_qt" type="number" min="1" max="20" step="1" value="1"></h5>
    <div id="div01">
        <h6>Div 01</h6>
        <p class="div">
            <label for="div01_info01">Info 01</label>
            <input type="text" name="div01_info01" id="div01_info01">
        </p>
        <p class="div">
            <label for="div01_info02">Info 02</label>
            <input type="text" name="div01_info02" id="div01_info02">
        </p>
        <p class="div">
            <label for="div01_info03">Info 03</label>
            <input type="text" name="div01_info03" id="div01_info03">
        </p>
        <p class="div">
            <label for="div01_info04">Info 04</label>
            <input type="text" name="div01_info04" id="div01_info04">
        </p>
        <p class="div">
            <label for="div01_info05">Info 05</label>
            <input type="text" name="div01_info05" id="div01_info05">
        </p>
    </div>
    <div id="div02">
        <h6>Div 02</h6>
        <p class="div">
            <label for="div02_info01">Info 01</label>
            <input type="text" name="div02_info01" id="div02_info01">
        </p>
        <p class="div">
            <label for="div02_info02">Info 02</label>
            <input type="text" name="div02_info02" id="div02_info02">
        </p>
        <p class="div">
            <label for="div02_info03">Info 03</label>
            <input type="text" name="div02_info03" id="div02_info03">
        </p>
        <p class="div">
            <label for="div02_info04">Info 04</label>
            <input type="text" name="div02_info04" id="div02_info04">
        </p>
        <p class="div">
            <label for="div02_info05">Info 05</label>
            <input type="text" name="div02_info05" id="div02_info05">
        </p>
    </div>
    <div id="div03">
        <h6>Div 03</h6>
        <p class="div">
            <label for="div03_info01">Info 01</label>
            <input type="text"...

CSS

#div02,
#div03,
#div04,
#div05,
#div06,
#div07,
#div08,
#div09,
#div10,
#div11,
#div12,
#div13,
#div14,
#div15,
#div16,
#div17,
#div18,
#div19,
#div20 {
    display: none;
}
}

JavaScript

$("#divs_qt").change(function() {
        $('div[id^=div]').hide().slice(0, parseInt(this.value, 10)).show();
    });