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 + '   ">-</button></div></div>').appendTo('#email');
        $('<button/>', {
            id: 'minusButton' + i,
            click: function () {
                $("#email '+i' ").hide();
                $("#email1").val('');
                $("#email2").val('');
            }
        });
    }
    i++;
});

$(document).on('click','.deleteButton',function(){
    $(this).closest('.form-group').hide();//remove
});