javascript - Make a hamburger ID work in two headers -

i creating clone of header , when scroll reach height, clone version display. works, want. problem trying “hamburger” action work in both headers. works in first section. need working in section 2 also. know have used id (“trigger-overlay”), should used 1 time , unique.

is correct , reason why not working? guys know workaround fix problem?

i need id because of more complex code in script, if it’s not possible keep in way. appreciate here. see jsfiddle

html

<section id="one">     <header class=""> <a id="trigger-overlay" class=""><span class="hamburger"></span></a>     </header> </section> <section id="two"></section> 

css

section {     height:100vh; }  #one{     background-color:#0097a7; }  #two{     background-color:#00bcd4; }  .hamburger, #trigger-overlay .hamburger:before, #trigger-overlay .hamburger:after {     cursor: pointer;     background-color:#80deea;     width:25px;     height:3px;     display:block;     border-radius:6px;     -webkit-transition:top 0.3s 0.2s ease, bottom 0.3s 0.2s ease, background-color 0.3s ease, -webkit-transform 0.3s ease;     transition:top 0.3s 0.2s ease, bottom 0.3s 0.2s ease, background-color 0.3s ease, transform 0.3s ease; } #trigger-overlay {     float: left;     margin-left:15px; } .hamburger:before, .hamburger:after {     content:"";     position:absolute; } .hamburger {     position:relative;     top:19px; } .hamburger:before {     top:-7px; } .hamburger:after {     bottom:-7px; } /*hamburger hover*/  #trigger-overlay .hamburger:hover, #trigger-overlay .hamburger:hover:before, #trigger-overlay .hamburger:hover:after {     background-color: #00838f; } header {     position: relative;     width: 100%;     height: 60px;     background-color:#00acc1; } header.clone {     position: fixed;     background-color: #00acc1;     top: 0px;     left: 0;     right: 0;     transform: translatey(-100%);     transition: 0.2s transform cubic-bezier(.3, .73, .3, .74); } body.down header.clone {     transform: translatey(0); } 

vanilla js

var triggerbttn = document.getelementbyid( 'trigger-overlay' );  var sticky = {     sticky_after: 200,     init: function () {         this.header = document.getelementsbytagname("header")[0];         this.clone = this.header.clonenode(true);         this.clone.classlist.add("clone");         this.header.insertbefore(this.clone, this.header.childnodes[1]);         this.scroll();         this.events();     },     scroll: function () {         if (window.scrolly > this.sticky_after) {             document.body.classlist.add("down");          } else {             document.body.classlist.remove("down");         }     },     events: function () {         window.addeventlistener("scroll", this.scroll.bind(this));     } };  function toggleoverlay() {     alert("i want active in both headers "); }   triggerbttn.addeventlistener( 'click', toggleoverlay ); document.addeventlistener("domcontentloaded", sticky.init.bind(sticky)); 

unfortunately using same id won't give same eventlisteners. but, it's easy around problem adding same eventlisteners newly created clone:

   document.getelementsbyclassname('clone')[0].addeventlistener('click', toggleoverlay); 

see working version of fiddle here: http://jsfiddle.net/qfbq2b0k/4/