JSFiddle - React, Tailwind, and code Playground
by ethanpil
HTML
<h3>Original Material</h3>
<label for"source_bin">Source Bin</label>
<select id="source_bin"><option></option></select>
<label for"source_bin_qty">Source Bin QTY To Convert</label>
<table style="width:100%">
<tr>
<td width="85%">
<input type="text" name="source_bin_qty" id="source_bin_qty" value="0">
</td>
<td>LBS.</td>
<td style=""> <a href="#weightInfo" data-rel="popup" data-role="button" data-icon="info" data-theme="d" id="weightInfoIcon" data-iconpos="notext">Weight Units</a> </td><td> <a href="#weightCalc" data-rel="popup" data-role="button" data-icon="grid" data-theme="d" id="weightInfoIcon">Read Scale</a>
</td>
</tr>
</table>
<div data-role="popup" id="weightInfo" class="ui-content" data-theme="c" style="max-width:150px;">
<table style="font-size:.78em">
<tbody>
<tr>
<th>Pounds:</th>
<td id="weight-unit-pound"></td>
</tr>
<tr>
<th>Metric Tons:</th>
<td id="weight-unit-metric_ton"></td>
</tr>
<tr>
<th>Gross Tons:</th>
<td id="weight-unit-gross_ton"></td>
</tr>
<tr>
<th>Kilograms:</th>
<td id="weight-unit-kilogram"></td>
</tr>
</tbody>
</table>
</div>
<div data-role="popup" id="weightCalc" class="ui-content" data-theme="c" style="max-width:250px;">
<button data-theme="b" id="readScale">Read Scale</button>
<br />
<input type="text" name="calc-weight" id="calc-weight" value="0">
<select name="calc-weight-unit" id="calc-weight-unit">
<option value="pound" selected>Pounds</option>
<option value="metric_ton">Metric Tons</option>
<option value="gross_ton">Gross Tons</option>
<option value="kilogram">Kilograms</option>
</select>
<br />
<div id="calc-weight-info"></div>
<button data-theme="a"...