<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"> <form action="" method="POST"> <div class="form-row-container"> <div id="list" class="row"> <div id="emprovise-stock-data-values" class="form-input-row-wrapper"> <div class="form-row"> <div class="col-xs-12 col-md-4"> <input type="text" name="symbol[]" class="symbol form-input" placeholder="Company Symbol"> </div> </div> <div class="form-row"> <div class="col-xs-12 col-md-4"> <input type="text" name="symbol[]" class="symbol form-input" placeholder="Company Symbol"> </div> </div> <div class="form-row"> <div class="col-xs-12 col-md-4"> <input type="text" name="symbol[]" class="symbol form-input" placeholder="Company Symbol"> </div> </div> <div class="new-row-placeholder"></div> <button id="add-new-value" class="btn btn-success">+</button> </div> </div> </div> </form> </div>

.form-input { text-align: center; border:2px solid #337ab7; border-radius:5px; font-size:20px; margin: auto; } .form-row-container{ background-color:grey; height: 300px; display: block; text-align: center; padding: 55px; } .form-input-row-wrapper { background-color:yellow; height: 200px; padding-top: 75px; }

$("#add-new-value").click(function(){ var new_row = $("#emprovise-stock-data-values").clone(); var list = $(document).find("#list"); var add_button = $(document).find("#add-new-value"); });