<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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"> <h2>Manuscripta editor</h2> </div> <form > <fieldset> <!-- Form Name --> <legend>Header</legend> <!-- Text input--> <div class="form-group"> <label class="control-label" for="textinput">Title of description</label> <div> <input id="textinput" name="textinput" placeholder="tei:titleStmt/tei:title" class="form-control input-md" type="text"> </div> </div> <div class="row"> <div class="control-group" id="fields"> <label class="control-label" for="field1">Nice Multiple Form Fields</label> <div class="controls"> <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 btn-add" type="button"> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> </form> <br> <small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another form field :)</small> </div> </div> </div> <div class="row"> <div class="col-xs-3"> <label class="control-label" for="searchinput">Name of cataloguer/encoder</label> <input id="searchinput" name="searchinput" placeholder="tei:respStmt/tei:persName" class="form-control input-md" required="" type="search"> </div> <div class="col-xs-4"> <label class="control-label" for="checkboxes">Responsibility</label> <div> <label class="checkbox-inline" for="checkboxes-0"> <input name="checkboxes" id="checkboxes-0" value="1" type="checkbox"> Cataloguer </label> <label class="checkbox-inline" for="checkboxes-1"> <input name="checkboxes" id="checkboxes-1" value="2" type="checkbox"> Encoder </label> </div> </div> </div> <!-- Search input--> <div class="form-inline"> <label class="control-label" for="searchinput">Name of cataloguer/encoder</label> <div class=""> <input id="searchinput" name="searchinput" placeholder="tei:respStmt/tei:persName" class="form-control input-md" required="" type="search"> </div> </div> <!-- Multiple Checkboxes (inline) --> <div class="form-inline"> <label class="control-label" for="checkboxes">Responsibility</label> <div> <label class="checkbox-inline" for="checkboxes-0"> <input name="checkboxes" id="checkboxes-0" value="1" type="checkbox"> Cataloguer </label> <label class="checkbox-inline" for="checkboxes-1"> <input name="checkboxes" id="checkboxes-1" value="2" type="checkbox"> Encoder </label> </div> <button id="button1id" name="button1id" class="btn btn-success">Add</button> <button id="button2id" name="button2id" class="btn btn-danger">Remove</button> </div> <legend>Manuscript indentifier</legend> <!-- Select Basic --> <div class="form-group"> <label class="control-label" for="selectbasic">Country</label> <div> <select id="selectbasic" name="selectbasic" class="form-control"> <option value="1">Sweden</option> <option value="2">Denmark</option> </select> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="ontrol-label" for="selectbasic">Settlement</label> <div > <select id="selectbasic" name="selectbasic" class="form-control"> <option value="1">Gothenburg</option> <option value="2">Lund</option> <option value="3">Stockholm</option> <option value="4">Uppsala</option> </select> </div> </div> <!-- Text input--> <div class="form-group"> <labelcontrol-label" for="textinput">Shelfmark</label> <div> <input id="textinput" name="textinput" placeholder="tei:idno@type='shelfmark'" class="form-control input-md" type="text"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="control-label" for="textinput">Former Shelfmark</label> <div> <input id="textinput" name="textinput" placeholder="tei:altIdentifier/tei:idno@type='former_shelfmark'" class="form-control input-md" type="text"> </div> </div> </fieldset> </form> </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-add').addClass('btn-remove') .removeClass('btn-success').addClass('btn-danger') .html('<span class="glyphicon glyphicon-minus"></span>'); }).on('click', '.btn-remove', function(e) { $(this).parents('.entry:first').remove(); e.preventDefault(); return false; }); });