Dynamically added element failed to display check box and select tag

I added a form row with two text fields and select and checkbox .Also created add button using javascript to add extra row .But it fails to display select and checkbox. We use function add_family for adding new elements

<div class="col col-lg-1 col-md-1 col-sm-12 col-12">
<input type="button" id="more_fields" class="btn btn-primary btn-sm " 
onclick="add_family();" value="Add" /></div>

HTML

                         <div id="morefamily">
                        <div>
                         <div class="row">

                            <div class="col col-lg-2 col-md-2 col-sm-12 col-12">
                                <label class="control-label">Relation</label>
                            <div class="form-group label-floating is-select">

              <select name="relation[]" class="selectpicker form-control">
                                    <option value="spouse">Spouse</option>
                                    <option value="son">Son</option>
                                    <option value="daughter">Daughter</option>
                                    <option value="brother">Brother</option>
                                    <option value="sister">Sister</option>
                                    <option value="others">Others</option>
                                </select>
                            </div>
                            </div>
                            <div class="col col-lg-3 col-md-3 col-sm-12 col-12">
                            <label class="control-label">Name</label>
                                <input name="relName[]" class="form-control" placeholder="" type="text">
                            </div>
                            <div class="col col-lg-2 col-md-2 col-sm-12 col-12">
                            <label class="control-label">Age</label>
                                <input name="relAge[]" class="form-control" placeholder="" type="text">
                            </div>
                            <div class="col col-lg-3 col-md-3 col-sm-12 col-12">
                            <label class="control-label">Occupation</label>
                                <input name="relOcptn[]" class="form-control" placeholder="" type="text">
                            </div>
                            <div class="col col-lg-2 col-md-2 col-sm-12 col-12">
                                <div class="switcher-block">

                                <div class="checkbox">
                                <label>
                                <input name="staff[]" type="checkbox" value="1">
                                Staff
                                </label>
                                </div>
                                </div>
                            </div>

Script Looks Like this

function add_family() {
fam++;
var obj = document.getElementById('morefamily');
var divfam = document.createElement("div");
divfam.innerHTML = '<div class="row"><div class="col col-lg-2 col-md-2 col- 
sm-12 col-12"><label class="control-label">Relation</label><div class="form- 
group label-floating is-select"><select name="relation[]" 
class="selectpicker form-control"><option value="spouse">Spouse</option> 
<option 
value="son">Son</option><option value="daughter">Daughter</option><option 
value="brother">Brother</option><option value="sister">Sister</option> 
<option value="others">Others</option></select></div></div><div class="col 
col-lg-3 col-md-3 col-sm-12 col-12"><label class="control- 
label">Name</label><input name="relName[]" class="form-control" 
placeholder="" type="text"></div><div class="col col-lg-2 col-md-2 col-sm-12 
col-12"><label class="control-label">Age</label><input name="relAge[]" 
class="form-control" placeholder="" type="text"></div><div class="col col- 
lg-3 col-md-3 col-sm-12 col-12"><label class="control- 
label">Occupation</label><input name="relOcptn[]" class="form-control" 
placeholder="" type="text"></div><div class="col col-lg-2 col-md-2 col-sm-12 
col-12"><div class="switcher-block"><div class="checkbox"><label><input 
name="mmstaff[]" type="checkbox" value="1">Staff</label></div> </div> 

'; componentHandler.upgradeElements(divfam); obj.appendChild(divfam); } </script>

When I inspected the page ,I found that the added checkbox fails to load .

Hope I will get best solutions.