title: Dropdown not working the second time when clicked using dom
body: <p>I have made a navigation tab with buttons, and a side-button which displays a list of files when I click the nav button.</p>
  <p>Visual representation:</p>
  <pre><code>check1 check2 check3  
  
  dropdown (assuming check1 is clicked)
     1.txt
     2.txt
  </code></pre>
  <p>All the information comes up properly when I click on these checks in the console. but when I click on the button second time, it doesn't display any dropdown even though it shows correct information in console.</p>
  <p>Code for function to create dropdown:</p>
  <pre><code>function add_pvt_dropdown(files) {
    const dropdown_div = document.getElementById(&quot;pvt_list_dropdown&quot;);
    //console.log(dropdown_div.childNodes[2])
    console.log(&quot;these are the child nodes \n:&quot;, dropdown_div.childNodes, &quot;and this is the lenght&quot;, dropdown_div.childNodes.length)
  
    if (dropdown_div.childNodes[2])
      dropdown_div.removeChild(dropdown_div.childNodes[2])
    console.log(dropdown_div)
    const UL = document.createElement(&quot;ul&quot;); 
  
    //files = localStorage.getItem('all_file_in_dir').split(',')
    if (typeof (files) === undefined &amp;&amp; files == null) {
      alert(&quot;choose something&quot;)
    } else {
        UL.setAttribute(&quot;class&quot;, &quot;dropdown-menu&quot;);
        UL.setAttribute(&quot;id&quot;, &quot;pvt_option&quot;);
        UL.setAttribute(&quot;aria-labelledby&quot;, &quot;dropdownMenuButton&quot;);
        files.forEach(val =&gt; {
          if (val.includes('CSV_')) {
            var li = document.createElement('li');
            var a = document.createElement('a');  
            
            a.setAttribute('class', &quot;dropdown-item&quot;)
            a.setAttribute('id', val)
            li.appendChild(a);
            UL.appendChild(li)
  
            t = document.createTextNode(val);
            a.innerHTML = a.innerHTML + val;
            console.log(a.innerHTML)
          }
        });
  
        dropdown_div.appendChild(UL)
    }
  
  
  }
  </code></pre>
  <p>HTML code</p>
  <pre><code>&lt;div id=&quot;pvt_list_dropdown&quot; class=&quot;dropdown&quot; data-toggle=&quot;dropdown&quot; data-bs-toggle=&quot;dropdown&quot; data-bs-toggle=&quot;dropdown&quot; &gt;
      &lt;button class=&quot;btn btn-secondary dropdown-toggle btn-sm&quot; type=&quot;button&quot; id=&quot;dropdownMenuButtonPvt&quot; data-toggle=&quot;dropdown&quot; data-bs-toggle=&quot;dropdown&quot; aria-expanded=&quot;false&quot;&gt;
              List
      &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Functionality: when I click on the navigation buttons, it takes all the files from a particular directory and shows as dropdown. As mentioned, it works just once, but when I click any other button or the same button twice, nothing is shows up in the dropdown.</p>
  <p>Further information: I checked that it may be an arrangement issue with js and bootstrap but even correcting that doesn't help:</p>
  <pre><code>  &lt;script src=&quot;https://unpkg.com/@popperjs/core@2&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js&quot; integrity=&quot;sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  
    &lt;link href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; id=&quot;bootstrap-css&quot;&gt;
    &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x&quot; crossorigin=&quot;anonymous&quot;&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>how information is shown for that element:</p>
  <pre><code>&lt;div id=&quot;pvt_list_dropdown&quot; class=&quot;dropdown&quot;&gt;
        &lt;button class=&quot;btn btn-secondary dropdown-toggle btn-sm&quot; type=&quot;button&quot; id=&quot;dropdownMenuButtonPvt&quot; data-bs-toggle=&quot;dropdown&quot; aria-expanded=&quot;false&quot;&gt;List&lt;/button&gt;
  
        &lt;ul class=&quot;dropdown-menu&quot; id=&quot;pvt_option&quot; aria-labelledby=&quot;dropdownMenuButton&quot;&gt;
          &lt;li&gt;
            &lt;a class=&quot;dropdown-item&quot; id=&quot;f1.csv&quot;&gt;f1.csv
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a class=&quot;dropdown-item&quot; id=&quot;f2.csv&quot;&gt;f2.csv
            &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Edit:
  information on how events are triggered:</p>
  <p>the menu bar is called when DOM is loaded:
  document.addEventListener(&quot;DOMContentLoaded&quot;, menu_tags)</p>
  <p>menu_tags is a function that will dynamically create the menu using create an element</p>
  <p>function menu_tags() {</p>
  <pre><code>var check = [&quot;check1&quot;,
  &quot;check2&quot;
  ]
  sub_checks = [
      &quot;sub_checks1&quot;
  ]
  
      var toadd = document.createDocumentFragment();
      var i;
        for (let i = 0; i &lt; check.length; i++) {
          var newLi = document.createElement('a');
          newLi.href = &quot;#&quot; + check[i];
          newLi.innerHTML = check[i];
          newLi.id = check[i];
          newLi.className = &quot;tablinks&quot;
          newLi.onclick = function() {open(event, check[i])};
          
          // if(lib_verify_check[i] == &quot;lib-checker&quot;){
              
          // }
          toadd.appendChild(newLi);
      }
  
      document.getElementById(&quot;myTopnav&quot;).appendChild(toadd)
  
  }
  </code></pre>
  <p>The open function will fetch the information for files for selected check</p>
  <pre><code>function open(event, checkname){
      var i, tabcontent, tablinks;
      tablinks = document.getElementsByClassName(&quot;tablinks&quot;);
      
      for (i = 0; i &lt; tablinks.length; i++) {
          
          tablinks[i].className = tablinks[i].className.replace(&quot;active&quot;, &quot;&quot;);
        }
        event.currentTarget.className += &quot; active&quot;;   
        
        console.log(event.currentTarget.id)
        localStorage.setItem('selected_check', event.currentTarget.id)          
          // Exists.
          if(event.currentTarget.id){
            get_files()
            console.log(&quot;changed&quot;)
            
        }
        
        //localStorage.getItem('get_files')
  }
  </code></pre>
  <p>in the get_files() function, all the file information will be stored and that information will be displayed in dropdown.</p>
  <p>Please find the fiddle link below:
  Note that get_files wont work in fiddle, this is for checking the functionality:</p>
  <p><a href="https://jsfiddle.net/mrinal18/0863ufbj/17/" rel="nofollow noreferrer">fiddle_link</a></p>