<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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="panel-group"> <div class="panel panel-default"> <div class="panel-heading">등록</div> <div class="panel-body"> <form role="form" id="registForm"> <input type="hidden" name="contentCount" value="1" /> <div class="form-group"> <label for="input-code">명칭</label> <input type="text" class="form-control" id="input-code"> </div> <div class="form-group"> <label for="content-1">내용</label> <div class="input-group" id="input-group-1"> <input type="text" class="form-control" id="content-1"> <span class="input-group-btn"> <button class="btn btn-default" id="addContent-1" type="button"><span class="glyphicon glyphicon-plus"></span></button> </span> </div><!-- /input-group --> </div> <div class="form-group"> <label for="input-StartDate-1">시작일</label> <input type="date" class="form-control" id="input-StartDate-1" placeholder="시작일"> </div> <div class="form-group"> <label for="input-EndDate-1">종료일</label> <input type="date" class="form-control" id="input-EndDate-1" placeholder="종료일"> </div> <div class="form-group"> <label for="exampleInputFile">이미지 파일</label> <input type="file" id="exampleInputFile"> <p class="help-block">.jpg, .gif, .png</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">등록</button> </form> </div><!-- END panel-body --> </div><!-- END panel --> </div><!-- END panel-group --> </div><!-- END row --> </div><!-- END container -->

.input-group { margin-bottom:10px; }

$(document).ready(function(){ var contentCount=1; $("#addContent-1").click(function(e){ // [Add input] // START input-group var newDiv = $(document.createElement("div")).attr({id:"input-group-"+(contentCount+1), class:"input-group"}); newDiv.html( "<input type='text' class='form-control' id='content-"+ (contentCount+1) +"'>" +"<span class='input-group-btn'>" + "<button class='btn btn-danger' id='removeContent-" + (contentCount+1) + "' type='button'>" + "<span class='glyphicon glyphicon-minus'></span>" + "</button>" +"</span>" ); $("#input-group-"+contentCount).before(newDiv); ++contentCount; $("input[name='contentCount']").val(contentCount); // END input-group // [Remove input] $("#removeContent-" + contentCount).click(function(e){ if(contentCount==1){ alert("No more input to remove"); return false; } $("#input-group-" + contentCount).remove(); --contentCount; $("input[name='contentCount']").val(contentCount); }); }); // END $("#addContent11").click(function(e){ });