Django + JQuery - Interactive Gantt Chart

Im working on an interactive gantt chart with django and jquery.

I build the table like this:

<div class="gantt">
<div class="gantt-labels">
    
</div>
<div class="gantt_timeline">        
<div class="table gantt_table" id="myTable">
<thead>
<div class="gantt-tr time-bar"> 
                                    
    </div>
</thead>
<tbody>      
Liquid error: This liquid context does not allow includes.
    
</tbody>
</div>
</div>
</div>

The queryset "items2" holds the data for the table (amount of rows and cells in dates)

Example:

row1 01/01/2012

row2 02/01/2012

...

row31 31/01/2012

---

datamodel3.html

Here are the bars:

The queryset "items3" holds the data for the bars (name, start- and finish-date)

Example:

bar1 01/01/2012 10/01/2012

bar2 08/01/2012 14/01/2012

---

I use this to make the bars draggable:

(function() {
    $(".bar").draggable({
    containment: "parent"
    });
})();

---

I use this to make the bars resizable:

https://codepen.io/ZeroX-DG/pen/vjdoYe

---

I use this to schedule them:

https://codepen.io/tutsplus/pen/ZEzerNB

---

I use this to assign a label to each row:

var iLabel = 0;
document.querySelectorAll('#labels').forEach(function (element, index) {
element.innerHTML = iLabel < labels.length ?
labels[iLabel] :
'';
iLabel++;
})

---

So far, the bars have the right length (start and finish date), are draggable and resizable.

The only thing for now is to append each bar to its row (first bar to first row and so on....)

I tried different ways, but ended up assigning each row and bar an ID and attaching them to one another:

$(document).ready(function(){
newfunction();
});

function newfunction(){
    var thisrows = $("#row1");
    var thisbars = $("#bar1");
    /* var fragment = document.createDocumentFragment(); fragment.appendChild(thisbars); */
$(thisrows).html(thisbars);
}

When I try to use fragments, I get: TypeError: Argument 1 ('node') to Node.appendChild must be an instance of Node.

Now, instead of hard-coding every id, I tried to do something like this:

function newfunction(){
var n = 0;
var e = 0;
$(".rows").each(function(){
var thisrows = $(this).attr("id") + n;
n++;
});
$(".bars").each(function(){
var thisbars = $(this).attr("id") + e;
var fragment = document.createDocumentFragment();
fragment.appendChild(thisbars);
e++;
});
$(thisrows).appendChild(fragment);
};

Which doesnt work, even without using fragments. Any suggestions?

---

Also, I want to save the new position and length of the bar when I move/resize it.

What would be the best approach to do this?

Thank you in advance

Here is my first post about this with an image of the table:

Django + JQuery - Append bars to table rows

from Django + JQuery - Interactive Gantt Chart