Kinetic 5.0.2 loading multi image from Json

Question

I would like to build an drawing tool by Kineticjs Framework. Base on this tutorial: http://www.html5canvastutorials.com/kineticjs/html5-canvas-load-complex-stage-with-kineticjs/

I generate Json string, and try to recreate object base on the id that I give before. However I release 2 main problem in my code.

1. If there are 2 images which have the same id (in my case: drag and drop twice image from menu to canvas), then when we re drawing it will draw only the last one. The same thing happened in tutorial also.

2. When I try to run this stageReceived.get('#'+ arrMenu[i].id)[0] it is always return undefined, but it works if I type stageReceived.get('#removeMenu')[0]

    var arrMenu = [];
    function MenuItems(id, type) {
               this.id = id;
               this.type = type;
               this.source = "image/Menu_Icons/" + id + "." + type;
               this.draggable = true;
               return this;
           }
   
           //declare Object Menu                            
           var removeMenu = new MenuItems("removeMenu", "png");
           var rotate90DegreeMenu = new MenuItems("rotate90DegreeMenu", "jpg");
           var rotate180DegreeMenu = new MenuItems("rotate180DegreeMenu", "png");
   
           arrMenu.push(removeMenu);
           arrMenu.push(rotate90DegreeMenu);
           arrMenu.push(rotate180DegreeMenu);
   

   // user press send button to generate and drawing stage in another div

           $('#send').click(function() {
               //declare json string 
               var json = stage.toJSON();
               console.log(json);
               // prepare stage 
               var stageReceived = Kinetic.Node.create(json, 'divMilldeRight');
               var imageObj = new Image();
               for (var i = 0; i < arrMenu.length; i++) {
                   var idImage = '#';
                   idImage = idImage + arrMenu[i].id;
   
                   imageObj.onload = function() {
                       printConsole("onload function", idImage);
                       if (stageReceived.get(idImage)[0].image(imageObj)) {
                           stageReceived.draw();
                       }
   
                   };
                   imageObj.src = arrMenu[i].source;
               }
            });
   

Any help is appreciate a lot :) thanks in advance.

Credit for @Elsa. Set the same different id for the same image everytime it is insert, but giving the same name. find array of images by .find('.name') do loop and .get('#id'). problem solved. Hope it help sb has same trouble.

            var shapes = stage.find('.image');//get the array of image
            // doing loop for every shape
            shapes.each(function(shape){
                console.log(shape.attrs.id); // get the different id of each shape
                stage.get('#'+shape.attrs.id)[0].image(imageObj); // set it for image
            });
            imageObj.src = source;
            stage.draw();

Answer 1

I advise you to never set the same id to different nodes. The main concept of the id is to define unique nodes. You'd better use the name attribute if you want to call different images.

You can then do this

stageReceived.get('.'+ thename)[0]; //or .find