Seperate div id for multiple instances of plugin element


I am building a plugin that inserts an object before newDiv div, like according to this piece of code:

var newDiv= $('<div id="newDiv"></div>');
mynewobject.create(newDiv, {.....etc etc

However this works fine, it doesn’t work for multilple instances of this element, because they will all try to insert the object before newDiv. As a solution I am trying to get hte canvas’s div name to set as the newDiv name. Does one of you know how to get this? Or even a better solution to handle multiple instances of a plugin element?

Thanks in advance for your help!

You should give each newDiv a unique id. Which means each instance of the plugin element’s newDiv will be unique.

Thanks, but how do I achieve that? I tried to get the element’s name (i.e. Element Name A, Element Name B and so on) or some other specific id per element, but I got trouble retrieving a unique identifier for the elements. Any ideas on how to achieve that? Thanks again.

You can create a unique ID and use this. There are a few examples online that show how to do this.

Hi @emmanuel and others,

I am still struggling with this. A new div ID is created for every instance of the element following this code:

function(instance, context) {

var divid = Math.random().toString(36).substr(2, 9);
var  newDiv = $('<div id="'+divid+'"></div>');
mynewobject.create(newDiv, {.....etc etc

This works fine, except when the element is placed in a group, then it’s not inserted and the debug console throws a TypeError: Cannot read property ‘myobject’ of undefined.

Any idea why this fails within a group element?

Thanks for your help in advance, much appreciated!!!

Make sure your page has finished loading before instantiating your objects.

Thanks for your suggestion @seanhoots. What’s the best way to ensure the page has finished loading before instantiating the plugin’s element? Is there a way to configure that in the plugin or do you know a JS snippet to achieve this? Thanks again.

Still can’t get it to work. Here’s a test page for the plugin on which I am trying to load two seperate text editors: One in the shadow box (group) and one above. The one placed in a group never loads, while the other does without issues.

This is the current initialize function:

function(instance, context) {

    var divid = 'editor_'+ Math.random().toString(36).substr(2, 9);
  	var  newDiv = $('<div id="'+divid+'"></div>');
  	var textarea = document.getElementById(divid);

    function loadeditor(){  
      sceditor.create(textarea, {
      format: 'bbcode'

Any suggestions are welcome for which I thank you in advance!

You should be checking document ready not textarea

Thanks again @seanhoots, I changed




However the problem persists. Did I make a mistake here or might something else be causing this problem? Thanks a lot in advance again!

The DOM might not be ready (especially a group) by the time you’re making this call.
So move this statement inside document ready

This should get you what your after,


$(function () {
    var textArea = $('<textarea>');
    textArea.css({ width: '100%', height: '100%' });
    instance.canvas.append(textArea); = textArea;


function(instance, properties, context) {
    $(function () {
        var textArea =;
        var inst = sceditor.create($(textArea)[0], {
            format: 'bbcode',
            width: '100%',
            height: '100%',
            style: 'https://www.sceditor.comminified/themes/content/default.min.css' //leave this property out if you have the style in the pages head.

          //This is a quick fix I made to make sure they can be dragged/expanded without being cut off. 
            .css('overflow', 'visible');

                height: inst.height(),
                width: inst.width()
            }) = textArea;

Well me lie if I didn’t say that was a fun little element to play with.


Thank you very much @PWC!! This solved the issue! :ok_hand:

Also many many thanks to @seanhoots, also very much appreciate our help! :raised_hands:

1 Like