JSFiddle - React, Tailwind, and code Playground

HTML

<table id="items">
    <thead>
        <th>Items</th>
    </thead>
    <tbody>
        <tr>
            <td><input class="input3 item" name="name_1" type="text" value="" autocomplete="off"></td>
        </tr>
    </tbody>
</table>
    <br clear="both">
    <div id="addmore">Add new line</div>

CSS

#items {
	background-color: none;
	margin-bottom: 12px;
	margin-top: 12px;
	border-collapse: collapse;
	float: left;
	width: 200px;
}
#items th {
	padding: 12px 9px;
	border: 1px solid #ccc;
	font: bold 14px Tahoma,sans-serif!important;
}
#items td {
	padding: 0px 0px;
	border: 1px solid #ccc;
}


#form1 {
	background-color: none;
	float: left;
	width: 953px;
	margin-top: 19px;
	border: 1px dashed #ccc;

}
#form1 .heading {
	background-color: #e2e2e2;
	text-align: left;
	padding: 7px 12px;
	margin: 5px;
	font-family: verdana;
	font-size: 16px;
	float: left;
	width: 919px;
}
.inputwrapper1 {
	background-color: none;
	width: 577px;
	margin-top: 7px;
	margin-bottom: 7px;
	float: left;
	padding: 12px 12px;
}
.inputwrapper2 {
	background-color: none;
	width: 340px;
	margin: 7px 0;
	float: left;
	padding: 12px 0;
}
.label1 {
	background-color: none;
	font-family: verdana;
	float: left;
	padding: 15px 0;
	margin-right: 26px;
	width: 160px;
}
.label2 {
	background-color: none;
	font-family: verdana;
	float: left;
	padding: 15px 0;
	margin-right: 26px;
	width: 130px;
}
.next {
	background-color: none;
	float: right;
	padding: 15px 0;
	margin-right: 60px;
	color: white;
	font-size: 12px;
}
.input1 {
	background: #f1f1f1;
	font-size: 18px;
	color: #666;
	padding: 12px 15px;
	margin: 0 0 0px 0;
	width: 226px;
	border: 1px solid #ccc;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
	-webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
	box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
}
.input2 {
	background: #f1f1f1;
	font-size: 18px;
	color: #666;
	padding: 12px 15px;
	margin: 0 0 0px 0;
	width: 113px;
	border: 1px solid #ccc;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
	-webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
	box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
}
.input3 {
	background:...

JavaScript

// add new line
$("#addmore").click(
  function () {
      var someText = '<td><input class="input3 item" name="name_2" type="text" value=""></td>';
     var newDiv = $("<tr>").append(someText);
     $('#items').append(newDiv);
       $( ".item" ).autocomplete({
      source: availableTags,
      minLength: 1,
    });
  }
);

// get autocomplete tags
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];

    $( ".item" ).autocomplete({
      source: availableTags,
      minLength: 1,
    });