JSFiddle - React, Tailwind, and code Playground

by _sir

HTML

<table>
<tr>
<td>
<form>
Gross Pay for employee </td> <td><div id="label" >1</div>
</td><td><input type="text" id="textbox"></td><td>

<input type="button" id="submitbutton" value="submit"/>
</form>
</td>
</tr>
</table>

<table>
  <tbody id="table">
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
  </tbody>
</table>


<p id="paragraph"></p>

CSS

* {margin:0; padding:0;}

#table
{

    font-family: arial, sans-serif;

}

#table td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

#table tr:nth-child(even) {
    background-color: #dddddd;
}

JavaScript

function start()
{
    var sorter = [];
var submitbutton = document.getElementById("submitbutton");
var textbox = document.getElementById("textbox");
var paragraph = document.getElementById("paragraph");
var grosslabel = document.getElementById("label");
var table = document.getElementById("table");



submitbutton.addEventListener("click", myFunction, false);

var x;
var counter = 1;

function myFunction() 
{
    x = textbox.value; //get textbox value

    counter++; //update employee #

    switch(true)
    {
        case (x > 200 && x < 299):
            sorter[0]++
        break;
        case (x > 300 && x < 399):
            sorter[1]++
        break;
        case (x > 400 && x < 499):
            sorter[2]++
        break;
        case (x > 500 && x < 599):
            sorter[3]++
        break;
        case (x > 600 && x < 699):
            sorter[4]++
        break;
        case (x > 700 && x < 799):
            sorter[5]++
        break;
        case (x > 800 && x < 899):
            sorter[6]++
        break;
        case (x > 900 && x < 999):
            sorter[7]++
        break;
        case (x > 1000):
            sorter[8]++
        break;  
    };

    grosslabel.innerHTML = counter; //update employee #

		var tr = document.createElement('tr');
    tr.appendChild(document.createElement('td'));
    tr.appendChild(document.createElement('td'));
    tr.appendChild(document.createElement('td'));
    table.appendChild(tr);
    
    textbox.value = ""; // clear textbox after submit
    }

}

start();