Jquery Sortable

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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>

CSS

/*Modal*/

.modal-textarea {
    width: 100%;
    resize: vertical;
}

.modal-header {
    border-bottom: 0px;
}

.modal-footer {
    border-top: 0px;
}

.modal .btn {
    width: 100%
}

.modal-title {
    text-align: center;
}

.modal_image_preview {
    padding: 20px 5px;
    max-width: 100%;
    max-height: 200px;
}

.page-layout {
    margin-top: 30px;
}

.add_section_div {
    width: 100%;
    border: 1px solid #a19595;
    text-align: center;
}

.div_body {
    width: 100%;
    text-align: center;
    min-height: 30px;
    padding:10px;
}

.section_div,
.wrap_div,
.item_div {
    width: 100%;
    border: 1px solid #a19595;
    margin: 10px 0px;
    text-align: center;
}
.minus,.plus{
    padding:3px 5px;
    border-right: 1px solid #a19595;
}
.item_div {
    margin: 0px;
}

.section_div .wrap_div .div_header {
    background-color: #EEEEEE;
}

.section_div .div_header {
    background-color: #DFF8EA;
    border-bottom: 1px solid #a19595;
}

.div_header p {
    margin: 0px;
}

.clearfix:after {
    content: '';
    display: block;
    clear: both;
}


/*.draggable-item{
    margin: 10px 0px;
}
.edit-icon {
    position: absolute;
    right: 5px;
    top: 5px;
}
.delete-icon{
    position: absolute;
    right:25px;
    top: 5px;
}

.ui-draggable.ui-draggable-handle {
    padding: 0px;
}*/


/*#sortables{
    display:flex;
    min-height: 300px;
}
.sortable-container {
   flex: 1;
    vertical-align: top;
}
.sortable {
    cursor: move;
    margin: 0;
    padding: 5px;
    list-style-type: none;
    vertical-align: top;
    border: 1px solid #000;
}
.ui-sortable-placeholder {
    border:  1px solid #ff0000;
    height:1px;
    margin-top:2px;
}
#draggables {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.draggable {
    margin: 5px 0px;
    cursor: move;
    color: #fff;
    background: #5dd1ff;
     border: 1px solid black;
    position: relative;
}

.sortable{
  height:100%;
}

#draggables .edit-icon ,#draggables .delete-icon{
    display:...

JavaScript

$(function() {

    $("body").on("click", ".text-item .edit-icon", function() {
        $('#textModal').modal('show');
    });
    $("body").on("click", ".image-item .edit-icon", function() {
        $('#imageModal').modal('show');
    });
    $("body").on("click", ".delete-icon", function() {
        if (confirm("Are you sure you want to delete this?")) {
            $(this).parent().remove();
        } else {
            return false;
        }
    });
    $(".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);
        $(".wrap_body").sortable();
    })
    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 +=...