JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<table class="table table-bordered table-hover" id="actionTable">
<thead>
<tr >
<th class="text-center">Action</th>
<th class="text-center">Responsibility</th>
<th class="text-center">Completion Date</th>
</tr>
</thead>
<tbody>
<tr id='actionRow'>
<td>
<input type="text" name='actionInput' placeholder='Action' class="form-control"/>
</td>
<td>
<select class="responsibility" name="responsibilityInput" id="responsibilityInput">
<option value=""></option>
<option value="OptionOne">Option One</option>
<option value="OptionTwo">Option Two</option>
<option value="OptionThree">Option Three</option>
<option value="OptionFour">Option Four</option>
</select>
</td>
<td>
<input type="text" name='dateInput' placeholder='Completion Date' class="form-control"/>
</td>
</tr>
</tbody>
</table>
<a id="add_row" class="btn btn-default pull-right">Add Row</a>
<a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
JavaScript
$(".responsibility").select2({
tags: true
});
$(function() {
var i=1;
$("#add_row").click(function(){
$("table tr").eq(1).clone().find("input, select").each(function() {
$(this).val('').attr('name', function(_, name) { return name + i });
$(this).children("select").select2("destroy");
}).end().appendTo("table");
i++;
});
$("#delete_row").click(function(){
if(i>1){
$("#actionRow"+(i-1)).html('');
i--;
}
});
});