JSFiddle - React, Tailwind, and code Playground

by corinnekm

HTML

<div id="all_emps">
    <div class="em_area">
        <label>Employee 1</label>
        <input type=text required  />
        <label>Position</label>
        <input type=text required  />
        <label>Monthly Salary</label>
        <input id="em_sal" type="text" required size="10" onchange="javascript:alert(this.value);" />
        &nbsp &nbsp &nbsp 
        <label>Salary Tax</label>
        <input id="em_tax" name="em_tax" type="text" required size="10" readonly />
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        <a href="#" id="add_emp">Add</img></a>
        &nbsp &nbsp &nbsp &nbsp &nbsp
        <a href="#" id="del_emp">Delete</a>
    </div>  
</div>

JavaScript

$(document).ready(function(){

var counter = 2;

$("#add_emp").click(function () {


var newTextBoxDiv = $(document.createElement('div'))
     .attr("class", 'em_area' + counter);

newTextBoxDiv.after().html('<br><label>Employee '+counter+' </label> <input id=em_name name=em_name type=text required  /> <label>Position</label> <input id=em_post name=em_post type=text required  /> <label>Monthly Salary</label> <input id=em_sal name=em_sal size=10 type=text required  /> &nbsp &nbsp &nbsp <label>Salary Tax</label> <input id=em_taxds type=text size=10 required />  ' );

newTextBoxDiv.appendTo("#all_emps");


counter++;
 });

 $("#del_emp").click(function () {


counter--;

    $(".em_area" + counter).remove();

 });
 });