I'm having a problem with creating multiple clones of one big fieldset, I am making multiple instances of the same div according to elements in a selectlist, and the child elements I am creating have textfields that are not accessible any more, here is my code:

var qFieldsId= 0;
$("#IBlist option").each(function () {
    qFieldsId++;
    var select = document.getElementById("qId");
    var clone = select.cloneNode(true);
    clone.setAttribute("id", "qId" + qFieldsId);
    document.getElementById("qFieldsId").appendChild(clone);
}); 

I am having the new instances correctly but the problem is, many textareas to fill and fields are not clickable or editable at all, here is an example of one in the original instance of the div:

<div class="form-group col-md-3" data-bind="validationElement: CCommission,visible: CCommissionVisible()">
    <label for="CCommission" class="control-label required">Confirmation Commission</label>
    <span class="form-control "
data-bind="visible: !editingCCommission(), text: global.formatAsDecimal(CCommission(),CCommissionDecimal()), click: editConfirmationCommission"></span>
    <input type="number" class="form-control " data-bind="visible: editingCCommission, value: CCommission, hasFocus: editingCCommission" />
</div>

I don't know if this problem is caused by the Ids of each new field or what exactly and I couldn't find a solution for the bug.