JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<div class="extraTemplate">
			
			<div class="form-group">
				<label for="projDesc" class="col-sm-4 control-label">Project Description</label>
				<div class="col-sm-4">
					<input class="form-control" type="text" id="projDesc" name="projDesc[]">
				</div>
			</div>

</div>

<div id="container"></div>

		<div class="form-group">
			<div class="col-sm-offset-4 col-sm-4">
				<button id="addProj" type="button" class="btn btn-default btn-sm">Add another project</button>
			</div>
		</div>

CSS

.extraTemplate {

    display: none;
}

JavaScript

$(document).ready(function () {
     $('<div/>', {
         'class' : 'extra', html: GetHtml()
     }).appendTo('#container');
     $('#addProj').click(function () {
           $('<div/>', {
               'class' : 'extra', html: GetHtml()
     }
     
     ).hide().appendTo('#container').slideDown('slow');
           $('.price').off('keyup').keyup(calculateTotal);
   
     });
     $('.price').off('keyup').keyup(calculateTotal);
})


function GetHtml() {

    var len = $('.extra').length;
    var $html = $('.extraTemplate').clone();

	$html.find('[name=projDesc\\[\\]]')[0].name="projDesc" + len;

    return $html.html();    
}