JSFiddle - React, Tailwind, and code Playground

by Cepesh16

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="col-auto mb-3 ml-auto">
	<button id="btnAddEmployee" class="btn btn-secondary rounded float-right"><i class="fas fa-plus-circle mr-2"></i>Add Employee</button>
</div>

<table id="tableEmloyeeManagement" class="table table-striped table-bordered text-center">

  <thead>
    <tr class="table-secondary">
      <th scope="col">User ID</th>
      <th scope="col">Password</th>
      <th scope="col">Edit</th>
    </tr>
  </thead>

  <tbody>

    <tr>
      <td><input id="userID" class="border-0 bg-none" type="text" value="name user" disabled></td>
      <td><input id="userPasswordID" class="border-0 bg-none" type="password" value="1234abcd" disabled></td>
      <td>
      	<a id="editUserAndPasswordID" href="#"><i class="fas fa-edit mr-2"></i>EDIT</a>
      </td>
    </tr>
  </tbody>

</table>

JavaScript

var count = 1;
  
  $('#btnAddEmployee').click(function() {
  count++;
  var userID = 'user' + count;
  var passwordID = 'password' + count;
  var editUserAndPasswordID = 'editUserAndPassword' + count;
    $('#tableEmloyeeManagement tbody').append(`<tr><td><input id="${userID}" class="border-0 bg-none" type="text" value="name user" disabled></td><td><input id="${passwordID}" class="border-0 bg-none" type="password" value="1234abcd" disabled></td><td><a id="${editUserAndPasswordID}" href="#"><i class="fas fa-edit mr-2"></i>EDIT</a></td></tr>`);

  })
	
//
$('#editUserAndPasswordID').click(function() {

		// вкл/выкл border
		if($('#userID').hasClass('border-0') && $('#userPasswordID').hasClass('border-0')) {
    
			$('#userID').toggleClass('border-0');
			$('#userPasswordID').toggleClass('border-0');
		}		

})