Jquery dynamically added forms are not clickable and do not allow any input (all the ui elements can not be focused or clicked)

Question

I created a container to add elements to it as follow

<div>
<div id="mainForm" class="form-container">
</div>
<button class="add-button" value="Add" />
</div>

then on button click

$(".add-button").click(function () {
    add($(this).parent().find(".form-container:first").prop("id"), getID());
});

function getID(){
var d = new Date();
return d.getYear().toString() + d.getMonth().toString() + d.getDate().toString() + d.getHours().toString() + d.getMinutes().toString() + d.getSeconds().toString() + d.getMilliseconds().toString();
}

function add(id, parentid){
var form = "<div class='form-item' id='" + id + "'>";

form += "<div class='item-data row'>";
form += "<div class='col-lg-5 col-sm-5'>";
form += "<select><option value='1'>Item 1</option></select>";
form += "</div>"
form += "<div class='col-lg-5 col-sm-5'>";
form += "<input type='text'/>";
form += "</div>"
form += "<div class='col-lg-2 col-sm-2'>";
form += "<input type='checkbox' id='ck" + id + "'/><label for='ck" + id + "'>Only</label>";
form += "</div>"
form += "</div>";

form += "<div class='item-sub row'>";
form += "<div class='item-sub-form' id='sf" + id + "'></div>";
form += "<button class='add-button' value='Add'/>";
form += "</div>";

form += "</div>"

$("#" + parentid).append(form);
}

when click add button the ui created but i can't select from the dropdown list, the check box also is not clickable and text box does not allow input (all the ui elements can not be focused or clicked).

All UI displayed as image