JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<body>
<div data-role="page" id="invPage">
<div data-role="header" data-position="fixed" css="position: fixed !important;top: 0px;">
<h1>Inventory</h1>
</div>
<div id="inventoryContent" data-role="content">
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="inventory.html" data-icon="grid" class="ui-btn-active ui-state-persist"> Inventory</a></li>
<li><a href="technician.html" data-icon="edit" onclick="cacheInventoryPage();">Technician</a></li>
<li><a href="logout.html" data-icon="delete" onclick="cacheInventoryPage();">Logout</a></li>
</ul>
</div>
</div>
</div>
</body>
JavaScript
loadData = function (data){
var len = 50, html = '<div class="ui-grid-b" >';
for(var i = 0;i < len;i++){
var a ='<div class="ui-block-a" style="width:55px;"><input id="input'+ i + '" type="number" style="text-align:right;" step="0.1" min="0" /></div>';
var b ='<div class="ui-block-b" style="width:15%;padding-top:15px;padding-left:1px;"><label id=label"'+ i + 'UOMLabel" >product '+ i + '</label></div>';
var c ='<div class="ui-block-c" style="width:60%;padding-top:15px;"><label id="desLabel'+ i + 'DescLabel" >description '+ i + '</label></div>';
html += a + b + c;
if(i == 0)html = html.replace('<input','<input autofocus="autofocus"');
}
if(len>0){
html += '</div><a href="#" data-role="button" data-theme="a" onclick="alert(1);">Submit</a>';
}else{
html += 'There are no products to count at this time.<br/><a href="#" data-role="button" data-theme="a" onclick="refreshThisPage();">Refresh</a>';
}
$('[data-role="content"]').html(html);
$('[data-role="content"]').trigger('create');
return len>0;
};
loadData();