Jquery UI Sortable not working in Dynamic container

I have a container where I dynamically add sections, I create items inside the section , that should be sortable, But Jquery sortable does not work inside dynamically created containers, while if I give the containers static it works, Can anyone please share a solution.Thanks

https://jsfiddle.net/anubala/7ut5wk3j/1/

HTML:

<div class='row page-layout'>
        <div class='col-md-10 col-md-offset-1' >
        <div class="add_section_div">
            <p>Add section</p>
        </div>
        <div id="contents">
        </div>
        </div>
    </div>

JavaScript:

$(".wrap_body").sortable();
$(".add_section_div").on("click", function() {
    var $section = "<div class='section_div'><div class='div_header clearfix'><p class='pull-left'>Add Wrap</p></div><div class='section_body div_body'></div></div>";
    $("#contents").append($section);

})
$("body").on("click", ".section_div>.div_header", function() {
    var $wrap = "<div class='wrap_div'><div class='div_header clearfix'><p class='pull-left'>Add Item</p></div><div class='wrap_body div_body clearfix'></div></div>";
    $(this).parent().find('.section_body').append($wrap);
})
const regex = /^.*-\s*(.*)$/;
$("body").on("click", ".wrap_div>.div_header", function() {
    var $item1 = "<div class='drag col-sm-";
    var $item2 = "'><div class='item_div'><div class='div_header clearfix'><p class='pull-left'><span class='minus'><i class='fa fa-minus'></i></span><span class='plus'><i class='fa fa-plus'></i></span></p><p class='pull-left header_text'>";
    var $item3 = "</p></div><div class='div_body'></div></div></div>";
    var length_item = $(this).parent().find(".wrap_body .item_div").length;
    var count = 0;
    for (i = 0; i < length_item; i++) {
        if ($(this).parent().find(".wrap_body>div:eq('" + i + "')")) {
            console.log($(this).parent().find(".wrap_body>div:eq('" + i + "')"))
            var col_count_text = $(this).parent().find(".wrap_body>div:eq('" + i + "')").attr('class');
            count += parseInt(find_col_count(col_count_text));

        }
    }
    var current_col_count = 12 - (count % 12);
    if (count < 12) {
        $(this).parent().find('.wrap_body').append($item1 + current_col_count + $item2 + "col-sm-" + current_col_count + $item3);
    }
})


function find_col_count(col_text) {
    var col_count = regex.exec(col_text);
    col_count.forEach((match, groupIndex) => {
        count1 = match;
    });
    return count1;
}
$("body").on("click", ".plus", function() {
    var $parent = $(this).parent().parent().parent().parent();
    var col_count_text = $parent.attr('class');
    var length_item = $parent.parent().find(".item_div").length;
    var count = 0;
    for (i = 0; i < length_item; i++) {
        if ($parent.parent().find(".item_div:eq('" + i + "')").parent()) {
            var col_count_text = $parent.parent().find(".item_div:eq('" + i + "')").parent().attr('class');
            count += parseInt(find_col_count(col_count_text));
        }
    }
    var col_count_text = $parent.attr('class');
    var col_count = find_col_count(col_count_text);
    if (count < 12) {
        var col_count_new = "col-sm-" + (++col_count);
        var col_count_drag = "drag " + col_count_new;
        $parent.attr("class", col_count_drag);
        $parent.find(".header_text").html(col_count_new);
    }
});
$("body").on("click", ".minus", function() {
    var $parent = $(this).parent().parent().parent().parent();
    var col_count_text = $parent.attr('class');
    var col_count = find_col_count(col_count_text);
    if (col_count > 1) {
        var col_count_new = "col-sm-" + (--col_count);
        var col_count_drag = "drag " + col_count_new;
        $parent.attr("class", col_count_drag);
        $parent.find(".header_text").html(col_count_new);
    }
});