Duplicate Element after using L.DOMUtil Leaflet

I create sidebar, and want to add (append) it to map using L.DomUtil

**This JS Code:
**

//Create Custom Bar Left
L.Control.MyControl = L.Control.extend({
  onAdd: function(map) {
    var custombar = L.DomUtil.create('div', 'map-custombar-left');/*
        ulcustombar = L.DomUtil.create('ul', 'ul-menu-map-custombar-nav', custombar),
        licustombar = L.DomUtil.create('li', 'li-menu-map-custombar-nav', custombar),
        ahrefcustombar = L.DomUtil.create('a', 'navbar-map-custombar-link', custombar),
        inputcustombar = L.DomUtil.create('input', 'btn-check', custombar); */
        selectmaptype = L.DomUtil.create('select', 'form-select', custombar);

    let html = document.getElementById("custombarmap").innerHTML;
    custombar.innerHTML = html;

    return custombar;
  },

  onRemove: function(map) {
    // Nothing to do here
  }
});

L.control.customLeftBar = function(opts) {
  return new L.Control.MyControl(opts);
}

L.control.customLeftBar({
  position: 'topleft'
}).addTo(map);

After create that, the result as picture below:

My issue is not about how to display, because i can hide Original Div with remove z-index.
My issues are, 1 and 2 so like a mirror with duplicate ID and everything. I give one example as picture below:

Its so complicated. My point is i want using Sidebar that added to map before, not original sidebar.

I still learning about leaflet, and need help for fix this.

You need to sign in to view this answers