Как по нажатию двух кнопок добавлять\удалять input поля для ввода данных?

Есть такая View:

<div class="">
    <div class="form-group" style="padding-top: 40px">
        <label class="col-sm-2 control-label">Title:</label>
        <div class="col-sm-10">
            @Html.EditorFor(model => model.Event.Title, new { htmlAttributes = new { @class = "form-control", placeholder = "Enter title.." } })
        </div>
    </div>
    <div class="form-group" style="padding-top: 25px">
            <label class="control-label" style="padding-left:16px;">Repertoire:</label><br />
            <button class="btn btn-sm" type="button" onclick="">add</button>
    </div>
</div>
<div style="padding-top: 100px;">
    <input type="submit" name="Save" value="Save" class="btn btn-default" style="margin-left: 200px" />
    <button class="btn btn-sm" type="button" onclick="location.href='@Url.Action("Index", "Home")">Cancel</button>
</div>

По нажатию этой кнопки:

            <button class="btn btn-sm" type="button" onclick="">add</button>

должно появляться поле инпут, рядом с которым будет крестиком для удаления (при нажатии на которое будет оно удаляться)