Adding id attribute to jQuery dRawr toolbox

I’m using jquery drawr canvas and I need multiple canvas sections on one page. I’ve got it working all correctly, except the toolbar of brushes do not stay on the page next to their respective canvases. I can set the offset if it’s just one element(canvas) but with multiple I cannot, as the element it generates only has a class and seen as one element.

I’m trying to solve this by adding an ID attribute. It works but only for the last element. All the tool bars in my example below have the ID that is the last element in the array.

Example(note this array is just numbers 24,25,26):

var question_secs = <?php echo json_encode($question_section_arr); ?>;
var arrayLength = question_secs.length;
$(document).ready(function(){
    for (var i = 0; i < arrayLength; i++) {
        var section = question_secs[i];
   //Turn a canvas element into a sketch area
   $("#drawr-container-"+ section +" .demo-canvas-"+ section +"").drawr({
        "enable_transparency" : false
    });

    //Enable drawing mode, show controls
    $("#drawr-container-"+ section +" .demo-canvas-"+ section +"").drawr("start");

    var offset = $("#canvas-"+ section +"").offset();
    var topoff = offset.top + 1127;
    var leftoff = offset.left - 83;

    $('.drawr-toolbox').attr('id', 'toolbox-' + section);

    $('#toolbox-' + section).css({top: topoff, left: leftoff, position:'absolute'});
    
    
}

});

In my example here I get three working canvas and brush toolboxes but the toolboxes are in completely the wrong place on the page? this element "drawr-toolbox" is generated by the library and it assumes you are only have one on the page so no id, and therefore I cannot set separate offsets? I suppose I could go changing the library file but that seems like bad practice to me.

Note: this is the function that is creating the toolbox element from the library

   /* Create floating dialog and appends it hidden after the canvas */
    plugin.create_toolbox = function(id,position,title,width){
        var self = this;
        var toolbox = document.createElement("div");
        toolbox.innerHTML="<div style='padding:5px 0px 5px 0px'>" + title + "</div>";
        toolbox.className = "drawr-toolbox drawr-toolbox-" + id;
        toolbox.ownerCanvas = self;
        $(toolbox).css({
            "position" : "absolute", "z-index" : 6, "cursor" : "move", "width" : width + "px", "height" : "auto", "color" : "#fff",
            "padding" : "2px", "background" : "linear-gradient(to bottom, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%)", "border-radius" : "2px",
            "box-shadow" : "0px 2px 5px -2px rgba(0,0,0,0.75)", "user-select": "none", "font-family" : "sans-serif", "font-size" :"12px", "text-align" : "center"
        });
        $(toolbox).insertAfter($(this).parent());
        $(toolbox).offset(position);
        $(toolbox).hide();
        $(toolbox).on("mousedown.drawr touchstart.drawr", function(e){
            var ownerCanvas = this.ownerCanvas;
            var mouse_data = plugin.get_mouse_data.call(ownerCanvas,e,this);
            $(this).data("offsetx", mouse_data.x).data("offsety", mouse_data.y).data("dragging", true);
            plugin.is_dragging=true;
            e.preventDefault();
        });
        return $(toolbox);
    };