JSFiddle - React, Tailwind, and code Playground
HTML
<form method="post" action="">
<p>
<label>Name 1:</label>
<input type="text" name="name[]" size="30" />
</p>
<p>
<label>Name 2:</label>
<input type="text" name="name[]" size="30" />
</p>
<p>
<label>Name 3:</label>
<input type="text" name="name[]" size="30" />
</p>
<p>
<label>Address:</label>
<textarea name="address"></textarea>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
<div id='modal'></div>
CSS
#modal {
background:yellow;
color:black;
}
JavaScript
$('form').on('submit', function (e) {
e.preventDefault();
var o = {};
o['Name 1'] = $('label:contains(1)').next('[name="name[]"]').val();
o['Name 2'] = $('label:contains(2)').next('[name="name[]"]').val();
o['Name 3'] = $('label:contains(3)').next('[name="name[]"]').val();
o['Address'] = $('[name="address"]').val();
$.each(o, function (k, d) {
var p = '<p>' + k + ' : ' + d + '</p>';
$('#modal').append(p);
});
});