Dynamically repeat form section using jQuery

Question

I have a form with a section includes multiple select elements and checkboxes. Also, there are two buttons named Add and Remove. Upon clicking those buttons need to add same section, below the previous one or remove that section entirely. I managed to repeat the sections and remove them using jQuery. But when repeating, the values inside those select and checkboxes will disappear.

HTML

<div id="form-rep-sec" class="form-rep-sec">
    <div class="form-repeat-section d-flex flex-row">
        <div class="d-flex flex-column">
            <label>Day 1</label>
            <input name="date-1" type="datetime-local" class="form-field" placeholder="Arrival Date" required>
        </div>
    <div class="d-flex flex-column">
        <label>City</label>
        <select name="city" class="city" id="city-selection">
            <option selected="selected" value="">Select City</option>
            <option value="Ambewela">Ambewela</option>
            <option value="Anuradhapura">Anuradhapura</option>
            <option value="Colombo">Colombo</option>
            <option value="Dambulla">Dambulla</option>
            <option value="Galle">Galle</option>
            <option value="Jaffna">Jaffna</option>
            <option value="Kandy">Kandy</option>
            <option value="Nuwara Eliya">Nuwara Eliya</option>
            <option value="Sigiriya">Sigiriya</option>
            <option value="Wilpattu">Wilpattu</option>
            <option value="Yala">Yala</option>
        </select>
    </div>
    <div class="d-flex flex-column">
        <label>Hotel</label>
        <select name="hotel" class="hotel" id="hotel-selection">
            <option selected="selected" value="">Select Hotel</option>
        </select>
    </div>
    <div id="list1" class="dropdown-check-list d-flex flex-column">
        <label>Select Tours</label>
        <span class="anchor">Select Tours</span>
            <ul class="tours" id="tour-list">
            </ul>
    </div>
    <div class="btn-row d-flex justify-content-start">
        <div id="add-btn" onclick="addFormElements(this)">Add</div>
    <div id="del-btn" onclick="delFormElements(this)">Remove</div>
    </div>
  </div>
</div>

jQuery

function addFormElements(current){
    $(current).parents('.form-rep-sec').append($(current).parents('.form-repeat-section').clone())
}
function delFormElements(current){
    $(current).parents('.form-repeat-section').remove();
}

This is the code snippet which I used to repeat the form section. Please refer the whole code at JSFiddle