Todo funciona bien, pero también copia el valor dentro del botón de entrada, por ejemplo, si escribo primero en la entrada, primero también se copiará al hacer clic en el botón, ¿alguien tiene alguna resolución?
$(function(){ $(".btn-copy").on('click', function(){ var ele = $(this).closest('.example-2').clone(true); $(this).closest('.example-2').after(ele); }) }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-lg-12"> <div class="card"> <div class="card-header"> <h5 class="card-title">Add Class</h5> </div> <div class="card-body"> <form action="#"> <div class="example-2 form-group row"> <!--<label class="col-form-label col-md-2">Input Addons</label>--> <div class="col-xs-2"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">Class Name</span> </div> <input class="form-control" type="text"> <div class="input-group-append"> <button class="btn-copy btn btn-primary" type="button">Add More</button> </div> </div> </div> </div> <div class="form-group row"> <div class="col-xs-2"> <button class="btn btn-primary" type="button">Submit</button> </div> </div> </form> </div> </div> </div> </div> $(function() { $(".btn-copy").on('click', function() { var ele = $(this).closest('.example-2').clone(true); ele.find('input').val('') if (ele.find('button').length<2) { let btn = document.createElement("button"); btn.innerHTML = "Delete"; btn.onclick = (e) => { e.preventDefault() ele.remove() } ele[0].appendChild(btn); } $(this).closest('.example-2').after(ele); }) }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-lg-12"> <div class="card"> <div class="card-header"> <h5 class="card-title">Add Class</h5> </div> <div class="card-body"> <form action="#"> <div class="example-2 form-group row"> <!--<label class="col-form-label col-md-2">Input Addons</label>--> <div class="col-xs-2"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">Class Name</span> </div> <input class="form-control" type="text"> <div class="input-group-append"> <button class="btn-copy btn btn-primary" type="button">Add More</button> </div> </div> </div> </div> <div class="form-group row"> <div class="col-xs-2"> <button class="btn btn-primary" type="button">Submit</button> </div> </div> </form> </div> </div> </div> </div>