Edit: It was not the same as the possible duplicate, as I already addressed the fact that the clone() method was not copying the element - as I suspected, it was going to be something really lame, the scope of the prependTo was too wide, and was copying the line into multiple spaces, resulting into the 'select' value being transferred to a wrong location in the web page.
I am pretty sure that the answer to my question will be really lame and simple, but I can't make this happen for the life of me.
Upon the completion of a form, I need to copy the entire line into a div for reviewing purposes before adding the info to my database.
So, upon completion, I make sure to copy the entire line, add a 'remove' button, and prependTo the reviewing div, however when I am able to copy everything else, the select statement does not copy with the selected value.
I've tried using plain clone(), and it wouldn't copy the value, and then tried saving the value on a variable, and then adding it to the cloned element (before prepending it) and it won't work either.
Here's the html code:
<div class="tab-pane fade p-3" id="trucks-pane" role="tabpanel" aria-labelledby="trucks-tab">
<div class="container-fluid mt-2">
<div class="border p-2 rounded">
<h6 class="show-hidden-form" role="button">Add Truck(s)<span class="float-right"><i class="fas fa-chevron-down text-secondary"></i></span> </h6>
<div class="new-elements-form" style="display: none">
<small class="text-secondary"><i>Start typing the driver's info, rows will populate automatically</i></small>
<div class="d-flex flex-wrap new-element custom-input-group">
<div class="mr-1 mb-1">
<input type="text" class="form-control custom-input-element" name="" value="" autocomplete="new-password" placeholder="First Name">
</div>
<div class="mr-1 mb-1">
<input type="text" class="form-control custom-input-element" name="" value="" autocomplete="new-password" placeholder="Last Name">
</div>
<div class="mr-1 mb-1">
<input type="text" class="form-control custom-input-element datepicker" name="" value="" autocomplete="new-password" placeholder="Date of Birth">
</div>
<div class="mr-1 mb-1">
<input type="text" class="form-control custom-input-element" name="" value="" autocomplete="new-password" placeholder="License Number">
</div>
<div class="mr-1 mb-1">
<input type="text" class="form-control custom-input-element datepicker" name="" value="" autocomplete="new-password" placeholder="Date License Issued">
</div>
<div class="mr-1 mb-1">
<input type="text" class="form-control custom-input-element datepicker" name="" value="" autocomplete="new-password" placeholder="Date License Expires">
</div>
<div class="mr-1 mb-1">
<select class="form-control custom-input-element" name="">
<option value="">Select Type</option>
<option value="B1">B1</option>
<option value="CDL">CDL</option>
</select>
</div>
</div>
<hr>
<div class="added-elements">
<div class="d-none add-elements-button">
<button type="button" class="btn btn-primary" name="button">Add Truck(s)</button>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid mt-2">
<div class="border p-2 rounded">
<h6>Registered Trucks</h6>
</div>
</div>
</div>
And here's the Javascript code, that handles the cloning:
if(all_filled){
var delete_button = $("<div class='mr-1 mb-1 d-flex remove-element-line' role='button'><i class='far fa-times-circle text-danger align-self-center'></i></div>");
var select_value = scope.find('.custom-input-group').find('select').val();
var new_line = scope.find('.custom-input-group').clone();
new_line.find('select').val(select_value);
new_line.removeClass('custom-input-group').find('.custom-input-element').removeClass('is-valid').attr('disabled', true);
new_line.prepend(delete_button);
new_line.prependTo('.added-elements');
scope.find('.custom-input-group').find('.custom-input-element').removeClass('is-valid is-invalid').val('').first().focus();
scope.find('.add-elements-button').trigger('toggle-button');
}
What am I doing wrong?
