JSFiddle - React, Tailwind, and code Playground

by jdarville

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
			# <input type="text" id="num" name="more" value='10'><br>
<button type="button" id="more" name="more">How many do you want?</button><br>	
        
<table id="table" align="center">
  <thead>
    <tr>
      <th>Template ID</th>
      <th>UNC Path</th>
      <th>Username</th>
      <th>Password</th>
      <th>Scan To</th>
    </tr>
    <tr>
      <th><input type="text" id="templateinfo" name="test" placeholder="copy&paste here"></th>
      <th><input type="text" id="uncinfo" name="test" placeholder="copy&paste here"></th>
      <th><input type="text" id="userinfo" name="test" placeholder="copy&paste here"></th>
      <th><input type="text" id="passinfo" name="test" placeholder="copy&paste here"></th>
      <th><input type="text" id="scaninfo" name="test" placeholder="copy&paste here"></th>
    </tr>
  </thead>
  <tbody>
    <tr class="hidden">
      <td><input type="text" id="temp0"></td>
      <td><input type="text" id="unc0"></td>
      <td><input type="text" id="user0"></td>
      <td><input type="text" id="pass0"></td>
      <td><input type="text" id="scan0"></td>
    </tr>
    <tr class="hidden">
      <td><input type="text" id="temp1"></td>
      <td><input type="text" id="unc1"></td>
      <td><input type="text" id="user1"></td>
      <td><input type="text" id="pass1"></td>
      <td><input type="text" id="scan1"></td>
    </tr>
  </tbody>
</table>

CSS

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;

}
th, td {
    padding: 5px;
}

.hidden {
	display: none; 
}

JavaScript

$( document ).ready(function() {
			$("#templateinfo").bind("paste", function(e){
				// access the clipboard using the api
				var pastedData = e.originalEvent.clipboardData.getData('text');
				arr = pastedData.split(' ');
				for(i=0; i < arr.length; i++){
					$("#temp"+i).val(arr[i]);
				}
			} );
			$("#uncinfo").bind("paste", function(e){
				// access the clipboard using the api
				var pastedData = e.originalEvent.clipboardData.getData('text');
				arr = pastedData.split(' ');
				for(i=0; i < arr.length; i++){
					$("#unc"+i).val(arr[i]);
				}
			} );
			$("#userinfo").bind("paste", function(e){
				// access the clipboard using the api
				var pastedData = e.originalEvent.clipboardData.getData('text');
				arr = pastedData.split(' ');
				for(i=0; i < arr.length; i++){
					$("#user"+i).val(arr[i]);
				}
			} );
			$("#passinfo").bind("paste", function(e){
				// access the clipboard using the api
				var pastedData = e.originalEvent.clipboardData.getData('text');
				arr = pastedData.split(' ');
				for(i=0; i < arr.length; i++){
					$("#pass"+i).val(arr[i]);
				}
			} );
			$("#scaninfo").bind("paste", function(e){
				// access the clipboard using the api
				var pastedData = e.originalEvent.clipboardData.getData('text');
				arr = pastedData.split(' ');
				for(i=0; i < arr.length; i++){
					$("#scan"+i).val(arr[i]);
				}
			} );
		});
    
    
function createMore(){
	var x = 1;
    var num = $('#num').val();
    for( var i = 2; i < num; i++ ) {
		x++; //text box increment
$("#table").append('<tr><td><input type="text" id="temp'+x+'"></td><td><input type="text" id="unc'+x+'"></td><td><input type="text" id="user'+x+'"></td><td><input type="text" id="pass'+x+'"></td><td><input type="text" id="scan'+x+'"></td></tr>');


$("tr").removeClass('hidden');
    }
}
$("#more").click(".add",createMore);