How to place dynamic carousel html with out .item class div in the static html page

I am trying to generate dynamic html (Bootstrap .item class divs) with Jquery. In my index.html:

<div id="collapseManagement" class="panel-collapse collapse ">
    <div class="panel-body">
        <div class="carousel slide management-item-carousel" id="osmManagementCarousel">
            <div class="carousel-inner" id="mngCourselInner">
            </div>
        </div>
    </div>
</div>

Jquery code:

//this will call from ajax callback
function dOMCHTMlreation(objEmployee) {

    for(var empIndex=0; empIndex<objEmployee.length;empIndex++){
        var  $itemhtmlEle=$("<div />")
        .addClass("item").html($("<div />")
        .addClass("col-md-12").html($("<a />")
        .attr("href","#")
        .append($("<img />")
        .attr("src",objEmployee[empIndex].Image)))
        .append($("<div />").addClass("caption").html($("<p></p>").html(objEmployee[empIndex].Reason))));
        $("#mngCourselInner").append($itemhtmlEle);
        // $dvItemClass.html("");
        }

      // courselCycle("#osmManagementCarousel");
      // courselSLider(".management-item-carousel .item");
    }   

 // ------------------------call back for Management section.
    function getJson(data) {
        if (data.success === -1) {
            return;
        }
        var objJson = $.xml2json(data);
        dOMCHTMlreation(objJson['#document'].Employees.Employee);

}

The code above throws the following error:

bootstrap.min.js:6 Uncaught TypeError: Cannot read property 'offsetWidth' of undefined

If I place the following html in the index page it is working fine

<div class="carousel-inner" id="mngCourselInner">
    <div class="item active">
    </div>
</div>

But I don't want to place .item div in my html page. Can anyone please help me to do this?