JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
	<button type="button" class="btn btn-primary btn-default" data-toggle="modal" data-target="#New-Employee-Modal" style="float: right;">
					Add New Employee
				</button>
<div class="modal fade" id="New-Employee-Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel">Employee</h4>
				</div>
				<div class="modal-body">

					<div id="data">
    <form id="person">
       <div class="form-group">
        <label class="control-label">First Name:</label>
        <input class="form-control" id="FirstName" name="FirstName" type="text">
       </div>
        <div class="form-group">
        <label class="control-label">Last Name:</label>
        <input class="form-control" id="LastName" name="LastName" type="text" >
        </div>
        <div class="form-group">
        <label class="control-label">Net Id:</label> 
        <input class="form-control" id="NetId" name="Netid" type="text" >
          </div>
        <div class="form-group">
        <label class="control-label">Phone #:</label>
        <input class="form-control" id="PhoneNumber" name="PhoneNumber" type="tel" required />
        </div>
       
        <div class="form-group">
        <label class="control-label">Email:</label>
        <input class="form-control" id="Email" name="Email" type="text" >
      </div>
        <div class="form-group">
       <label class="control-label">Role</label>
        <input class="form-control"  id="Role" name="Role" type="text" >
      
        </div> 
        <div class="form-group">
    ...

JavaScript

function AddData() {
            var rows = "";
                var FirstName = document.getElementById("FirstName").value;
                var LastName = document.getElementById("LastName").value;
                var NetId = document.getElementById("NetId").value;
                var PhoneNumber = document.getElementById("PhoneNumber").value.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
                var Email = document.getElementById("Email").value;
                var Active = document.querySelector('input[name="Active"]:checked');
                Active = Active ? Active.value : '';
                var Role = document.getElementById("Role").value;
                rows += "<td>" + FirstName + "</td><td>" + LastName + "</td><td>" + NetId + "</td><td>" + PhoneNumber + "</td><td>" + Email + "</td><td>" + Active + "</td><td>" + Role + '</td><td>  <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> <a id="icon-toggle-delete2" class="removebutton">  <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> </a></td>' ;
                var tbody = document.querySelector("#list tbody");
                var tr = document.createElement("tr");
                tr.innerHTML = rows;
                tbody.appendChild(tr)

                //
            
        }
        function UpdateForm() {
           
            $('span.glyphicon glyphicon-pencil').click(function ()
            {

            });
         
           
           
          
            
        }

        function ResetForm() {
            document.getElementById("person").reset();
        }