JSFiddle - React, Tailwind, and code Playground

by CrossEye

HTML

<table>
  <tr>
    <td id="check1td">check1td</td>
    <td id="check2td">check2td</td>
    <td id="check3td">check3td</td>
    <td id="check4td">check4td</td>
  </tr>
</table>

<input type="radio" name="filter" value="status" onclick="status()" checked>

CSS

td {
    padding: 5px; border: 1px solid #ccc;
}

JavaScript

function status(){

    try{
        var td = document.getElementById("check1td");
        td.innerHTML = "Current (CURR)<input type=\"checkbox\" name=\"skustat1\" value=\"CURR\" checked>";

        td = document.getElementById("check2td");
        td.innerHTML = "Test (TEST)<input type=\"checkbox\" name=\"skustat2\" value=\"TEST\" checked>";

        td = document.getElementById("check3td");
        td.innerHTML = "Stocking Internet (SINET)<input type=\"checkbox\" name=\"skustat3\" value=\"SINET\" checked>";

        td = document.getElementById("check4td");
        td.innerHTML = "Sellable Display (SLDSP)<input type=\"checkbox\" name=\"skustat4\" value=\"SLDSP\" checked>";
    }
    catch(err){
        console.log(err);
        alert(err.message);
    }
}