Estoy tratando de obtener los valores de mi formulario cuando el usuario clona la fila. Cuando clono las filas, ¿la identificación sigue siendo la misma? Si es así, ¿cómo hago para que las nuevas filas tengan una identificación única?
jQuery(function($) { var $button = $('#add-row'), $row = $('.period-row').clone(); $button.click(function() { $row.clone().insertBefore($button); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h3 class="heading">Please select appointment period</h3> <div class="form-wrapper"> <form action="#" id="date-form" name="date-form" method="POST"> <div class="period-row"> <label for="start">From:</label> <input type="datetime-local" name="start[]" id="start"> <label for="end">To:</label> <input type="datetime-local" name="end[]" id="end"> </div> <input type="button" id="add-row" name="add-row" value="add period" /> <button type="submit">submit</button> </form> </div>No entiendo qué es exactamente lo que quiere y para hacerlo de la manera correcta, debe usar la clase en la entrada y no la identificación porque la identificación es única. Pero espero que este código te ayude.
jQuery(function($) { var $button = $('#add-row'), $row = $('.period-row').clone(); $button.click(function() { let from = $('#start').val(); let to = $('#end').val(); $row.clone().insertBefore($button).addClass('active'); $('.period-row.active').find("#start").val(from); $('.period-row.active').find("#end").val(from); $('.period-row').removeClass('active'); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h3 class="heading">Please select appointment period</h3> <div class="form-wrapper"> <form action="#" id="date-form" name="date-form" method="POST"> <div class="period-row"> <label for="start">From:</label> <input type="datetime-local" name="start[]" id="start"> <label for="end">To:</label> <input type="datetime-local" name="end[]" id="end"> </div> <input type="button" id="add-row" name="add-row" value="add period" /> <button type="submit">submit</button> </form> </div>