JSFiddle - React, Tailwind, and code Playground

by Pavankumar Kumbar

HTML

<div id="form">
<input id="num" name="num" type="text" />
</div>

<p>&nbsp;</p>

<div id="form2">
<form action="" method="post" class="form_main">
    <div class="data">
        <div id="item0" class="item">
            <input id="name" name="name[]" type="text" placeholder="name" /><br/>
            <input id="age" name="age[]" type="text" placeholder="age" /><br/>
            <input id="city" name="city[]" type="text" placeholder="city" /><br/>
            <hr />
        </div>
    </div>
    <button type="submit" name="submit">Submit</button>
</form>

JavaScript

var itemNum = 1;
$("#num").on("change", function() {
    var count = this.value; 
    console.log(count);
    var item; 
    //item.attr('id', 'item' + itemNum);
    var i;
    for(i = 1; i <= count; i++) {
        console.log(i);
        item = $("#item0").clone().attr('id','item'+itemNum);
        item.children('input[name="name[]"]').attr('id','name'+itemNum); 			item.children('input[name="age[]"]').attr('id','age'+itemNum);        			item.children('input[name="city[]"]').attr('id','city'+itemNum);
        itemNum++;
        $(".data").append(item);            
    }
})