JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
                    
	
        <div class="control-group" id="fields">
            <div class="controls"> 
                <form role="form" autocomplete="off">
                 
                   

                <div class="row">
                   
                    <div class="voca">
                    <div class="col-md-3">
                    <label>Name</label>
                        <input class="form-control" placeholder="Name this snippet" name="name[]" type="text" >
                    </div>
                    <div class="col-md-3">
                    <label>Sweet</label>
                        <input class="form-control" placeholder="Name this snippet" name="sweet[]" type="text" >
                    </div>
                    <div class="col-md-3">
                    <label>Fruit</label>
                    <input class="form-control" placeholder="Name this snippet" name="fruit[]" type="text">
                    </div>
                    <div class="col-md-1">
                    Drinks
                        <select class="form-control" name="drinks[]">
                          <option value="1">1</option>
                          <option value="2">2</option>
                        </select>
                    </div>
                    <button type="button" class="btn btn-success btn-add" >
                        <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Add more
                    </button>
                    </div>
                    </div>    
                    
                </form>
            <br>

            </div>
        </div>

</div>

CSS

.entry:not(:first-of-type)
{
    margin-top: 10px;
}

.glyphicon
{
    font-size: 12px;
}

JavaScript

$(function()
{
    $(document).on('click', '.btn-add', function(e)
    {
        e.preventDefault();

        var controlForm = $('.controls form:first'),
            currentEntry = $(this).parents('.voca:first'),
            newEntry = $(currentEntry.clone()).appendTo(controlForm);

        newEntry.find('input').val('');
        controlForm.find('.btn-add:not(:last)')
            .removeClass('btn-default').addClass('btn-danger')
            .removeClass('btn-add').addClass('btn-remove')
            
            .html('<span class="glyphicon glyphicon-minus" aria-hidden="true"></span> Remove   ');
    }).on('click', '.btn-remove', function(e)
    {
		$(this).parents('.voca:first').remove();

		e.preventDefault();
		return false;
	});
});