<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <li style="text-align:center"><a href="#" data-toggle="modal" href="#" data-target="#createScrimmageModal" data-toggle="tab"><i class="fa fa-plus-circle fa-3x"></i><br> Create Scrimmage</a></li> <div class="control-group" id="fields"> <label class="control-label" for="field1">Nice Multiple Form Fields</label> <div class="controls"> <div class="modal fade" id="createScrimmageModal" tabindex="-1" role="dialog" aria-labelledby="myModal"> <div class="modal-dialog" role="document"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header" style="padding:15px 15px;"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h5> Create Scrimmage</h5> </div> <!-- Modal body--> <div class="modal-body" style="padding:20px 35px;"> <form> <div class="form-group col-md-6 col-lg-6"> <label for="scrimmageName"><span class="glyphicon glyphicon-user"></span> Name</label> <input type="text" class="form-control" id="scrimmageName" placeholder="Name" required autofocus> </div> <div class="form-group col-lg-8"> <label for="scrimmageType"><span class="fa fa-futbol-o fa-spin"></span> Sport</label> <div class="row"> <div class="col-lg-9"> <select class="form-control" required> <option>- Sport -</option> <option value="Soccer">Soccer</option> <option value="Basketball">Basketball</option> <option value="Baseball">Baseball</option> <option value="Football">Football</option> <option value="Golf">Golf</option> <option value="Biking">Biking</option> <option value="Swimming">Swimming</option> <option value="Running">Running</option> <option value="Rugby">Rugby</option> <option value="Skateboarding">Skateboarding</option> <option value="Volleyball">Volleyball</option> <option value="Extreme Frisbee">Extreme Frisbee</option> </select> </div> </div> </div> <!-- Game Type category --> <div class="form-group col-lg-9" required> <label for="gameType" style="margin-right:25px"><span class="glyphicon glyphicon-lock"></span> Game Type </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="Public" checked>Public <!-- When clicked, triggers function --> </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="Private">Private <!-- When clicked, triggers function --> </label> </div> <!-- Gender Setting category --> <div class="form-group col-lg-12" required> <label for="genderSetting" style="margin-right:25px"><span class="fa fa-venus-mars" style="font-size:23px"></span> Gender Setting</label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions1" id="inlineRadio1" value="Co-Ed" checked>Co-Ed <!-- When clicked, triggers function --> </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions1" id="inlineRadio2" value="Male Only">Male Only <!-- When clicked, triggers function --> </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions1" id="inlineRadio3" value="Female Only">Female Only <!-- When clicked, triggers function --> </label> </div> <div class="form-group col-lg-6"> <label for="date"><span class="fa fa-calendar"></span> Date</label> <input type="date" class="form-control" id="date" placeholder="Date" required=""> </div> <div class="form-group col-lg-3"> <label for="startTime"><span class="fa fa-clock-o"></span> Start Time</label> <input type="time" class="form-control" id="startTime" placeholder="Start Time" required=""> </div> <div class="form-group col-lg-3"> <label for="endTime"><span class="fa fa-clock-o"></span> End Time</label> <input type="time" class="form-control" id="endTime" placeholder="End Time" required=""> </div> <div class="form-group col-lg-6"> <label for="location"><span class="fa fa-map-marker faa-bounce animated"></span> Location</label> <input type="text" class="form-control" id="location" placeholder="Location" required=""> </div> <div class="form-group col-lg-6"> <label for="numberOfPlayers"><span class="fa fa-male"></span> Number of Players</label> <input type="number" class="form-control" id="#ofPlayers" placeholder="Number of Players" min="1" max="30"> </div> <div class="form-group col-lg-12"> <label for="details"><span class="fa fa-sticky-note"></span> Details</label> <input type="text" class="form-control" id="details" placeholder="Details"> </div> </form> </div><!-- ./modal body--> <div class="modal-footer"> <!-- <button type="submit" class="btn btn-danger btn-default pull-right" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button> <button type="submit" class="btn btn-success btn-default pull-left btn-add-panel" data-dismiss="modal" btn-add-panel> Create</button> --> <button class="input-group-btn"> <button class="btn btn-success btn-add" data-dismiss="modal" type="button"> <span class="glyphicon glyphicon-plus"> Create</span> </button> </button> </div><!-- ./ modal footer --> </div><!-- ./modal-content --> </div><!-- ./modal dialog --> </div><!-- create srimmage modal --> <form role="form" autocomplete="off"> <div class="entry input-group col-xs-3"> <input class="form-control" name="fields[]" type="text" placeholder="Type something" /> <span class="input-group-btn"> <button class="btn btn-success type="button"> <span class="glyphicon glyphicon-plus"title="Press to Add"></span> </button> </span> </div> </form> <br> <small>Press <span class="glyphicon glyphicon-plus gs"></span> to Add</small> </div> </div> </div> </div>

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

$(function() { $(document).on('click', '.btn-add', function(e) { e.preventDefault(); var controlForm = $('.controls form:first'), currentEntry = $(this).parents('.entry:first'), newEntry = $(currentEntry.clone()).appendTo(controlForm); newEntry.find('input').val(''); controlForm.find('.entry:not(:last) .btn-add') .removeClass('btn-success').addClass('btn-danger') .removeClass('btn-add').addClass('btn-remove') .html('<span class="glyphicon glyphicon-minus"title="Press to remove"></span>') }).on('click', '.btn-remove', function(e) { $(this).parents('.entry:first').remove(); e.preventDefault(); return false; }); });