JSFiddle - React, Tailwind, and code Playground
HTML
<form id="myForm">
<div id="input1" style="margin-bottom:4px;" class="clonedInput">
<p>Please Enter Your First Name Last Name</p>
<div style="border:1px solid black;padding:5px">
<label for="first1">first:</label>
<input type="file" name="first1" id="first1" multiple /><br />
<label for="last1">last:</label>
<input type="text" name="last1" id="last1" /><br />
</div>
<p>Please Enter Your Address</p>
<div style="border:1px solid black;padding:5px">
<label for="add1">address:</label>
<input type="text" name="add1" id="add1" /><br />
<select class="period" id="hour1" name="hour1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12" selected>12</option>
</select>
</div>
</div>
<div>
<input type="button" id="btnAdd" value="add another name" />
</div>
<div style="padding-top:30px">
<input type="button" id="submit" value="submit to Object" />
</div>
</form>
JavaScript
var storeData = {
"firstname": "",
"lastname": "",
"address": "",
"hour": ""
};
$('#btnAdd').click(function() {
var num = $('.clonedInput').length;
var newNum = new Number(num + 1);
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
$('#input' + num).after(newElem);
});
$('#submit').click(function() {
var data = $('#myForm').serializeArray();
for(i in data){
console.log(data[i]);
}
});