title: How to create 'Alias' like DOM elements?
body: <p>So I have this problem. Such a structure is generated programmatically</p>
  
  <pre><code>&lt;ul id="container1"&gt;
    &lt;li&gt;Click 1&lt;/li&gt;
    &lt;li&gt;Click 2&lt;/li&gt;
    &lt;li&gt;Click 3&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And on generation time click event handlers are assigned to these '<strong>li</strong>' elements. Basically clicking on any '<strong>li</strong>' hides the other '<strong>li</strong>' elements and only the one which is clicked would be visible.
  Now what I want to do is to have the same navigation cloned with all it's behaviour and I want to show it also on the other part of the page. It would look like this then </p>
  
  <pre><code>&lt;ul id="container1"&gt;
    &lt;li&gt;Click 1&lt;/li&gt;
    &lt;li&gt;Click 2&lt;/li&gt;
    &lt;li&gt;Click 3&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul id="container2"&gt;
    &lt;li&gt;Click Cloned 1&lt;/li&gt;
    &lt;li&gt;Click Cloned 2&lt;/li&gt;
    &lt;li&gt;Click Cloned 3&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The trick here is, when I click on any '<strong>li</strong>' element under '<strong>container2</strong>', the action will happen on '<strong>container1</strong>', lets say If I click on '<strong>Click Cloned 1</strong>' on '<strong>container2</strong>', '<strong>Click 2</strong>', '<strong>Click 3</strong>' will disappear on '<strong>container1</strong>'. I must code this on pure JS and no external libraries are allowed. I tried many things and nothing worked. Do you have any idea how can I make container2 working as an alias of container1?</p>