JSFiddle - React, Tailwind, and code Playground
HTML
<div id="info"/>
<!--<fieldset id='details'>
<legend> Product details: </legend>
<fieldset>
<legend>General info</legend>
<label> Name:</label>
<input id="name"/>
<br>
<label>Supplier ID (1-29):</label>
<input id="supplier"/>
<br>
<label>Category ID (1-8):</label>
<input id="category"/>
<label style="height:0; display: none; color: Teal" id="catInfo"></label>
<br>
<label>Quantity per unit:</label>
<input id="qpu"/>
<br>
<div>
<label>Price in:</label>
<input type='radio' name="currency" value="en-US" checked/>
<label>USD</label>
<input type='radio' name="currency" value="bg"/>
<label>BGN</label>
<input type='radio' name="currency" value="en-GB"/>
<label>GBP</label>
</div>
<label>Unit price:</label>
<input id="price"/>
<br>
</fieldset>
<fieldset>
<legend>Storage</legend>
<label>Units in stock:</label>
<input id="stock"/>
<label style="height:0; display: none;" id="stockInfo"></label>
<br>
<label>Units on order:</label>
<input id="order"/>
<br>
<label>Reorder level:</label>
<input id="reorder"/>
<br>
</fieldset>
<fieldset>
<legend>Unbound fields</legend>
<label>Supply:</label>
<input id="percent"/>
<button onclick="calculate()">Calculate</button>
<br>
<label>Unrelated phone field:</label>
<input id="mask1"/>
<br>
<label>Unrelated date:</label>
<input id="date"/>
<br>
<label>'To Upper' machine:</label>
<input id="mask2"/>
<br>
</fieldset>
<button...
JavaScript
$('#details').find('input').each(function(index){
$("#info").append(index + ",");
});