JSFiddle - React, Tailwind, and code Playground

by SuperG4bry

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<form method="post" action="savebulk.php" class="">  
 
        <div id="createtable">
			<input type="text" id="num" name="more" placeholder="How many?"><br>
<button type="button" id="more" name="more" class="btn btn-primary" >Create</button><br><br></div>
        
<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" name="temp1" value="001"></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>-->
   <!-- <tr class="hidden">
      <td><input type="text" name="temp1" value="002"></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>

JavaScript

$( document ).ready(function() {
		
			$("#uncinfo").bind("paste", function(e){
				// access the clipboard using the api
				var pastedData = e.originalEvent.clipboardData.getData('text');
				arr = pastedData.split(/\s+/);
				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(/\s+/);
				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(/\s+/);
				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(/\s+/);
				for(i=0; i < arr.length; i++){
					$("#scan"+i).val(arr[i]);
				}
			} );
});



function createMore(){
	$("#createtable").addClass('hidden');
	$("#xmlfile").removeClass('hidden');	
	Number.prototype.pad = function(size) {
      var s = String(this);
      while (s.length < (size || 0)) {s = "0" + s;}
      return s;
    }
	
		
	var x = 0;
	
    var num = $('#num').val();
    for( var i = 0; i < num; i++ ) {
	x++; //text box increment
		
	
		
$("#table").append('<tr><td><input type="text" name="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');


$('input[name="temp'+x+'"]').each(function() {
          $(this).val((x).pad(3,0));
}); 



    }
}
$("#more").click(".add",createMore);