JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<form method="post" action="collect_vals.php">
		<div id="input_fields">
		    <div><input type="text" name="name[]"> <input type="text" name="project[]"> <span class="fa fa-plus-circle" id="add_field"></span></div>
		</div>
		<input type="submit" value="submit">
            </form>

CSS

#add_field{
	cursor: pointer;
}
#add_field:hover{
	color: green;
}
#remove{
    cursor:pointer;
}
#remove:hover{
    color:red;
}
input{
    margin-bottom:2px;
}

JavaScript

$(document).ready(function() {
    $("#add_field").click(function(e){
        e.preventDefault();  
            $("#input_fields").append('<div><input type="text" name="name[]"/> <input type="text" name="project[]"> <span id="remove" class="fa fa-minus-circle"></span</div>'); 
    });
   
    $("#input_fields").on("click","#remove", function(e){ 
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});