JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

<input type="number" name="annual-average-number-of-employees">

CSS

.employees-calculator{
  width: 500px;
  font-family: helvetica;
  font-size: 12px;
  background-color:#efefef;
  border: solid 4px #ccc;
  border-radius: 10px;
  padding: 10px;
  position: absolute;
  margin-top: 10px;
}
.employees-calculator>button{
  margin-top: 10px;
  display: block;
  margin-left: auto;
  margin-right: 0px;
  background-color: #666;
  color: #fff;
  border: none;
  padding: 7px;
  cursor: pointer;
  transition: all 0.3s;
}
.employees-calculator>button:hover{
  opacity: 0.6;
}
.employees-calculator>table{
  border:solid 1px #000;
  background-color:#fff;
}
.employees-calculator>table>caption{
  font-size: 17px;
  background-color: #009e38;
  padding: 5px;
  color: #fff;
  text-transform: uppercase;
}
.employees-calculator>table th{
  vertical-align: top;
  border:solid 1px #000;
  background-color:#444;
  color:#fff;
}
.employees-calculator>table>tbody>tr>td{
  border:solid 1px #000;
}
.employees-calculator>table input{
  width: 60px;
}

JavaScript

function averageNumberOfEmployeesCalculator(element){

$('.employees-calculator').remove();

	var calculator = $('<div class="employees-calculator"><table width="100%" border="0" cellspacing="0" cellpadding="5"><caption>Average Number of Employees Calculator</caption> <tbody> <tr> <th width="20">1</th> <td><strong><em>Add up</em></strong> and then enter the number of employees your establishment paid <strong>IN EACH PAY PERIOD</strong> during the year.Be sure toinclude all employees: full-time, part-time, temporary, seasonal, salaried, and hourly.</td><td width="120">The total number of employees paid in all pay periods throughout the year=</td><td width="60"><input type="number" name="employees-calculator-1a" value="0"/></td></tr><tr> <th>2</th> <td><strong><em>Count</em></strong> and then enter the number of pay periods yourestablishment had during the year. Be sure to include any pay periods when you had no employees. For example, enter 26 if you have biweekly pay periods or 52 if you have weekly pay periods.</td><td>The number of pay periods during the year=</td><td><input type="number" name="employees-calculator-2a" value="0"/></td></tr><tr> <th>3</th> <td><strong><em>Divide</em></strong> the number of employees by the number of pay periods. (auto-calculated)</td><td><table border="0" cellspacing="3" cellpadding="0"> <tbody><tr> <td><input type="number" name="employees-calculator-1b" readonly value="0"/></td><td>/</td><td><input type="number" name="employees-calculator-2b" readonly value="0"/></td><td>=</td></tr></tbody></table></td><td><input type="number" name="employees-calculator-3" readonly value="0"/></td></tr><tr> <th>4</th> <td>Round the answer to the next highest whole number. (auto-calculated)</td><td>The number rounded=</td><td><input type="number" name="employees-calculator-4" readonly value="0"/></td></tr></tbody></table><button type="button">Apply value to FORM 300A</button></div>');
  
  calculator.find('button').click(function(){
  
  	
  
 ...