<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"> <div class="col-xs-12"> <div class="container"> <div class="row"> <div class="control-group" id="fields"> <label class="control-label" for="field1">Lütfen Makaledeki Yazar Sırası ile Doldurun.</label> <div class="controls"> <form id="register-form" onsubmit="return validateForm()" action="index.jsp" method="post" role="form" style="display: block;"> <div class="entry input-group col-xs-8"> <table> <tr> <td> <select class="form-control" name="fields[]" tabindex="1" placeholder="Ünvan" value=""> <option>Prof.Dr</option> <option>Doç.Dr</option> <option>Yrd.Doç.Dr</option> <option>Arş.Gör</option> <option>Araştırmacı</option> <option>Öğretim Görevlisi</option> <option>Okutman</option> <option>Uzman</option> <option>Diğer</option> </select> </td> <td> <input class="form-control" name="fields[]" type="text" placeholder="İsim Soyad" /> </td> <td> <input class="form-control" name="fields[]" type="text" placeholder="Email" /></td> <td><input class="form-control" name="fields[]" type="text" placeholder="Kurum" /> </td> <td> </td> </tr> </table> <span class="input-group-btn"> <button class="btn btn-success btn-add" type="button"> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> <textarea type="text" rows="6" name="ozettr" id="email" tabindex="1" class="form-control" placeholder="" value=""></textarea> <div class="form-group"> <div class="row"> <div class="col-sm-6 col-sm-offset-3"> <input type="submit" name="register-submit" id="register-submit" tabindex="4" class="form-control btn btn-register" value="Özet Gönder"> </div> </div> </div> </form> <br> <small> <span class="glyphicon glyphicon-plus gs"></span> yazar sayısını arttırmak için tıklayın.</small> </div> </div> </div> </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-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; }); });