JSFiddle - React, Tailwind, and code Playground

by Bahman ParsaManesh

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        
  <div id="button-container">
</div>

<ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">one</a></li>
    <li><a href="#!">two</a></li>
 </ul>
  
  <script>
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.dropdown-trigger');
    var instances = M.Dropdown.init(elems);
  });
  </script>

JavaScript

var htmlStr = ''
for (var i = 0; i < 100; i++) {
    htmlStr += `<a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>`
}

$('#button-container').html(htmlStr)