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);
    };

I came to this kind possibility too (modifying the orginal js function):

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"
  });

  var canvasOffset = $(this).offset();
  var toolboxOffset = {
    top: canvasOffset.top + position.top,
    left: canvasOffset.left + position.left
  };

  $(toolbox).insertAfter(this);
  $(toolbox).hide();
  $(toolbox).offset(toolboxOffset);

  $(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);
};

Figured it out in case anyone is curious. First I had to alter the main library file and if it was the brush toolbox (the one I needed) add an ID:

jquery.drawr.combined.js 
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;
if(id == 'brush') {
toolbox.id = position.top; 
}
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);
};

Then on my main file I started the drawr in a loop, then after the loop got all the ids with the map function. Then looped through those and got the correct offset top for each one (left was static) and applied it.

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];
$("#drawr-container-" + section + " .demo-canvas-" + section + "").drawr({
"enable_transparency": false
});
$("#drawr-container-" + section + " .demo-canvas-" + section + "").drawr("start");
}
var ids_pos = [];
var ids = $('.drawr-toolbox').map(function() {
return $(this).attr('id');
});
for (var x = 0; x < ids.length; x++) {
ids_pos.push(ids[x]);
}
let unique = [];
ids_pos.forEach(element => {
if (!unique.includes(element)) {
unique.push(element);
}
});
for (var x = 0; x < unique.length; x++) {
var offset_pos = document.getElementById(unique[x]);
let str = offset_pos.style.top;
var correct_top = Number(offset_pos.style.top.substring(0, offset_pos.style.top.length - 2)) + 1127;
var correct_left = Number(offset_pos.style.left.substring(0, offset_pos.style.left.length - 2)) - 450;
console.log(correct_top);
console.log(correct_left);
console.log(offset_pos);
offset_pos.classList.add("pos-"+x);
$(".pos-"+x).css({top: correct_top+"px", left: "80px", position:'absolute'});
}
});