JSFiddle - React, Tailwind, and code Playground

by Michael Baas

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<button onclick="Filltable()">
Fill Table
</button>
<table id="predData">

</table>

JavaScript

function Filltable(){
$("#predData").replaceWith('<table class="table table-sm table-bordered mt-4" id="predData"><thead><tr><th style="width:3em;"></th><th>ShoeSize</th><th class="pg1 text-nowrap">Point Estimate (Height)</th><th class="pg2">Lower Conf</th><th class="pg2">Upper Conf</th><th class="pg3">Lower Pred</th><th class="pg3">Upper Pred</th></tr></thead><tbody id="tbp" data-v="1"><tr><td class="text-right"><span><span id="rpr_1_1">1</span></span></td><td><input type="number" name="rpr_1_2" id="rpr_1_2" class="w-100 form-control" value="[Null]"/></td><td class="pg1"><input type="text" class="text-right form-control w-100" disabled="disabled" name="rpr_1_3" id="rpr_1_3"/></td><td class="pg2"><input type="text" class="text-right form-control w-100" disabled="disabled" name="rpr_1_4" id="rpr_1_4"/></td><td class="pg2"><input type="text" class="text-right form-control w-100" disabled="disabled" name="rpr_1_5" id="rpr_1_5"/></td><td class="pg3"><input type="text" class="text-right form-control w-100" disabled="disabled" name="rpr_1_6" id="rpr_1_6"/></td><td class="pg3"><input type="text" class="text-right form-control w-100" disabled="disabled" name="rpr_1_7" id="rpr_1_7"/></td></tr></tbody><tfoot><tr><td colspan="7"><span id="id339056085"><span class="text-success fas fa-plus-circle"></span></span></td></tr></tfoot></table>');
}