title: Dojo dijit add Div buttons dynamically
body: <p>I am having an issue with trying to dynamically create layers that can be be built and removed with a div as a button being added upon the layer's creation.  Here's how the code goes:</p>
  
  <p>I am having an issue with trying to dynamically create layers that can be be built and removed with a div as a button being added upon the layer's creation.  Here's how the code goes:</p>
  
  <pre><code>//build point graphics layer
  graphicsLayerInfo = this._addNewExcelLayerToList(plotArray.length);
  graphicsLyr = new GraphicsLayer( { id:graphicsLayerInfo.graphicsLayerID} );
  this.map.add(graphicsLyr);
  on(dojo.byId(graphicsLayerInfo.removeButtonID), "click" , lang.hitch(this, this._removeExcelLayer, {layerID: graphicsLayerInfo.graphicsLayerID, buttonLayerID: graphicsLayerInfo.currentLayerInfo}) );
  ...
  </code></pre>
  
  <p>and the function used to build the DIV/button</p>
  
  <pre><code>_addNewExcelLayerToList: function (pointCount) {
      if (this.debugMOde) {
          console.info( this.name + ' - ADD NEW EXCEL LAYER called.' );
      }
  
      this.layerCount++;
      currentLayerID = 'graphicsLayer' + this.layerCount;
      graphicsLayerID = this.name + '_gLyr' + this.layerCount;
      removeButtonID = "removeGraphicsLayer" + this.layerCount;
      this.layerList.push(currentLayerID);
      var layerInfo = "Number of Features: 1 Line";
      if (pointCount) {
          layerInfo = "Number of Features: " + pointCount;
      }
  
      content = "&lt;div id ='" + currentLayerID + "'" +
                      "style='width: 95%;" +
                             "height: 16px;" +
                             "line-height: 16px" +
                             "verticle-align: middle;" +
                             "padding: 5px;" +
                             "background-color: #000000;'" +
                "&gt;" +
                    "&lt;div style='float:left;'&gt;" +
                        "&lt;div style="float: left;" +
                                    "width: 20px;" +
                                    "line-height: 20px;" +
                        "&gt;" +
                            "&lt;img src='./js/Upload/images/excel.png'" +
                                 "style='position: absolute;" +
                                        "top: 0;" +
                                        "bottom: 0;" +
                                        "margin-top: -10px;" +
                                        "width: 20px;" +
                                        "vertical-align: middle;'" +
                            "&gt;&lt;/img&gt;" +
                        "&lt;/div&gt;
                        "&lt;div style='float:left;" +
                                    "font-size: 0.9em;" +
                                    "color: #ffffff;'" +
                        "&gt;" +
                            "Layer" + this.layerCount + ": " + layerInfo +
                        "&lt;/div&gt;" +
                    "&lt;/div&gt;" +
                    "&lt;div id='" + removeButtonID + "'" +
                              "data-dojo-attach-point='" + removeButtonID + "'" +
                              "name='" + removeButtonID + "'" +
                              "id='" + removeBUttonID + "'" +
                              "style='float: right;" +
                                     "width: 13px;" +
                                     "height: 13px;" +
                                     "cursor: pointer;" +
                                     "border-radius: 50%;" +
                                     "border: 2px; solid #ffffff;" +
                                     "background-color: #ff0000;" +
                                     "color: #ffffff;" +
                                     "font-weight: 300;" +
                                     "font-size: 17px;" +
                                     "font-family: Arial, sans-serif;" +
                                     "text-align: center;'" +
                    "&gt;" +
                        "X" +
                    "&lt;/div&gt;" +
                "&lt;/div&gt;";
  
      layerListDiv.innerHTML += content;
  
      graphicsLayerInfo = {
          removeButtonID: removeButtonID,
          graphicsLayerID: graphicsLayerID,
          currentLayerID: currentLayerID
      }
  
      return graphicsLayerInfo
   }
  </code></pre>
  
  <p>and the function to remove the DIV</p>
  
  <pre><code>_removeExcelLayer: function(layerInfo) {
      if (this.debugMode) {
          console.info( this.name + " - REMOVE EXCEL LAYER called.");
      }
  
      this.map.removeLayer( this.map.getLayer(layerInfo.layerID) );
      dojo.destroy(layerInfo.buttonLayerID);
  }
  </code></pre>
  
  <p>It removes the layer if I create only one.  If I create more than one, only the last layer created gets moved.  All the other 'removeButton's don't work.</p>
  
  <p>Any ideas on how to get this to remove the layers individually, per button?</p>