JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="form-group">
    <div class="col-sm-offset-4 col-sm-4">
		<select class="form-control" name="commTyp" id="comms">
			<option value="email" selected>Email</option>
		</select>				
		<br><button type="button" class="btn btn-sample btn-md addButton" id="comm">+</button> 
	</div>
</div>			
<div id="email"></div>

JavaScript

var i = 1;
$('#comm').click(function(){
if (i <=3){
$('<div class="form-group" id="email '+i+'  "><div class="col-sm-offset-4 col-sm-4"><label for="phone" class="control-label"><b>Email</b></label><input type="email" class="form-control" name="email1" placeholder="Email" value="" id="email1" /><br><input type="text" class="form-control" name="email2" placeholder="Description" value="" id="email2"/><br><button type="button" class="btn btn-sample2 btn-md deleteButton" id="minusButton'+i+'" onclick="deleteRow(this)">-</button></div></div>').appendTo('#email');
$('<button/>', {
       id: 'minusButton'+i,
       click: function () {	
			    $("#email '+i' ").hide();
				$("#email1").val('');
				$("#email2").val(''); }
   });
  }
i++;
});

window.deleteRow = function(obj){
    $(obj).parent().remove();
}