title: javascript dynamic select / on click event
body: <p>Hello I have a problem with an on click event
  I have two select's the first select changes the options of the second
  And everything is working taking a problem out of my onclick, clicking on an option should change the innerhtml and data.value of my class:</p>
  <blockquote>
  <p>selected-faturamento</p>
  </blockquote>
  <p>I was calling my event:</p>
  <pre><code>  ftoptionsList.forEach((o) =&gt; {
      o.addEventListener(&quot;click&quot;, () =&gt; {
        let input = o.querySelector(&quot;input&quot;).id;
        selectedFaturamento.innerHTML = o.querySelector(&quot;label&quot;).innerHTML;
        selectedFaturamento.setAttribute(&quot;data-value&quot;, input);
        faturamentoContainer.classList.remove(&quot;active&quot;);
      });
    });
  </code></pre>
  <p>to be able to change my data.value and my innerhtml, but for some reason my event is not called, every time I click on the options it calls my function:</p>
  <blockquote>
  <p>faturamentoOptions()</p>
  </blockquote>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const data = [
    {
      id: 1,
      name: "SIMPLES NACIONAL – MEI",
      funcionarioIncrease: 49.99,
      maxFuncionario: 1,
      socioIncrease: 0,
      maxSocio: 5,
      FATURAMENTO: [
        {
          id: 1,
          name: "ATÉ 30.000,00",
          value: 49.99,
        },
        {
          id: 2,
          name: "De 30.001,00 a 50.000,00 ",
          value: 99.99,
        },
      ],
    },
    {
      id: 2,
      name: "SIMPLES NACIONAL – SERVIÇOS",
      funcionarioIncrease: 25,
      maxFuncionario: 3,
      socioIncrease: 25,
      maxSocio: 5,
      FATURAMENTO: [
        {
          id: 1,
          name: "ATÉ 50.000,00",
          value: 149.99,
        },
        {
          id: 2,
          name: "De 40.001,00 a 50.000,00 ",
          value: 199.99,
        },
      ],
    },
  ];
  
  function createInput(id) {
    let inputRadio = document.createElement("input");
  
    if (id) {
      inputRadio.id = id;
      inputRadio.name = "category";
      inputRadio.type = "radio";
      inputRadio.value = id;
      inputRadio.classList.add("radio");
      return inputRadio;
    }
    return null;
  }
  
  function createFaturamento() {
    let container = document.querySelector(".faturamento-container");
    let selectedFaturamento = document.querySelector("div#selected-faturamento");
  
    data.forEach((value) =&gt; {
      if (value.id == 1) {
        value.FATURAMENTO.forEach((faturamento) =&gt; {
          let optionDiv = document.createElement("div");
          optionDiv.id = "ft";
          optionDiv.classList.add("optionft");
          container.append(optionDiv);
          let input = createInput(faturamento.id);
          if (!input) {
            return null;
          }
          optionDiv.append(input);
          let label = document.createElement("label");
          label.htmlFor = value.id;
          label.innerHTML = faturamento.name;
          optionDiv.append(label);
          if (faturamento.id == 1) {
            selectedFaturamento.innerHTML = faturamento.name;
            selectedFaturamento.setAttribute("data-value", faturamento.id);
          }
        });
      }
    });
  }
  
  function faturamentoOptions() {
    document.querySelectorAll("div#ft").forEach((item) =&gt; {
      item.remove();
    });
    let container = document.querySelector(".faturamento-container");
    let mode = document.querySelector(".selected").getAttribute("data-value");
    let selectedFaturamento = document.querySelector("div#selected-faturamento");
    data.forEach((value) =&gt; {
      if (value.id == mode) {
        value.FATURAMENTO.forEach((faturamento) =&gt; {
          let optionDiv = document.createElement("div");
          optionDiv.id = "ft";
          optionDiv.classList.add("optionft");
          container.append(optionDiv);
          let input = createInput(faturamento.id);
          if (!input) {
            return null;
          }
          optionDiv.append(input);
          let label = document.createElement("label");
          label.htmlFor = value.id;
          label.innerHTML = faturamento.name;
          optionDiv.append(label);
          if (faturamento.id == 1) {
            selectedFaturamento.innerHTML = faturamento.name;
            selectedFaturamento.setAttribute("data-value", faturamento.id);
          }
        });
      }
    });
  }
  
  function createModeOptions() {
    let container = document.querySelector(".options-container");
    let selectedMode = document.querySelector("div#serviceMode");
    data.forEach((value) =&gt; {
      let optionDiv = document.createElement("div");
      optionDiv.id = "serviceOption";
      optionDiv.classList.add("option");
      container.append(optionDiv);
      let input = createInput(value.id);
      if (!input) {
        return null;
      }
      optionDiv.append(input);
      var label = document.createElement("label");
      label.htmlFor = value.id;
      label.innerHTML = value.name;
      optionDiv.append(label);
      if (value.id == 1) {
        selectedMode.innerHTML = value.name;
        selectedMode.setAttribute("data-value", value.id);
      }
    });
  }
  
  function initalize() {
    //variables
    let selectedMode = document.querySelector("div#serviceMode");
    let optionsContainer = document.querySelector(".options-container");
    let optionsList = document.querySelectorAll("div#serviceOption");
    let selectedFaturamento = document.querySelector("div#selected-faturamento");
    let faturamentoContainer = document.querySelector(".faturamento-container");
    let ftoptionsList = document.querySelectorAll("div#ft");
  
    //events
    selectedMode.addEventListener("click", () =&gt; {
      faturamentoContainer.classList.remove("active");
      optionsContainer.classList.toggle("active");
    });
  
    selectedFaturamento.addEventListener("click", () =&gt; {
      faturamentoContainer.classList.toggle("active");
    });
  
    optionsList.forEach((o) =&gt; {
      o.addEventListener("click", () =&gt; {
        let input = o.querySelector("input").id;
        selectedMode.innerHTML = o.querySelector("label").innerHTML;
        selectedMode.setAttribute("data-value", input);
        optionsContainer.classList.remove("active");
        faturamentoOptions();
      });
    });
  
    ftoptionsList.forEach((o) =&gt; {
      o.addEventListener("click", () =&gt; {
        let input = o.querySelector("input").id;
        selectedFaturamento.innerHTML = o.querySelector("label").innerHTML;
        selectedFaturamento.setAttribute("data-value", input);
        faturamentoContainer.classList.remove("active");
      });
    });
    //call functions
  }
  createModeOptions();
  createFaturamento();
  initalize();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.option {
    border-radius: 8px;
  }
  .select-box {
    display: flex;
    width: 100%;
    max-height: 50px;
    flex-direction: column;
    position: relative;
  }
  
  .select-box .options-container {
    padding: 0;
    background: #fff;
    color: #000;
    max-height: 0;
    width: 100%;
    opacity: 0;
    transition: all 0.4s;
    border: 1px solid #dadada;
    border-radius: 8px;
    position: absolute;
    overflow: hidden;
    order: 1;
    top: 120%;
  }
  .select-box .options-container::after {
    position: absolute;
    display: block;
    content: "";
    bottom: 100%;
    right: 25px;
    width: 7px;
    height: 7px;
    margin-bottom: -3px;
    border-top: 1px solid #dadada;
    border-left: 1px solid #dadada;
    background: #fff;
    transform: rotate(45deg);
    transition: all 0.4s ease-in-out;
  }
  .selected {
    width: 100%;
    font-size: 1rem;
    outline: none;
    border: 1px solid #ffb24f;
    border-radius: 5px;
    padding: 1rem 0.7rem;
    font-family: "Poppins";
    background: #00416a;
    color: #ffb24f;
    transition: 0.1s ease-out;
    position: relative;
    order: 0;
  }
  .selected::before {
    background: none;
    border: 1px solid #ffb24f;
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    pointer-events: none;
  }
  .selected::after {
    position: absolute;
    display: block;
    content: "";
    width: 10px;
    height: 10px;
    top: 50%;
    right: 25px;
    border-bottom: 1px solid #dadada;
    border-right: 1px solid #dadada;
    transform: rotate(45deg) translateY(-50%);
    transition: all 0.4s ease-in-out;
    transform-origin: 50% 0;
    transition: all 0.4s;
  }
  
  .select-box .options-container.active {
    max-height: 240px;
    opacity: 1;
    padding: 10px 0;
    overflow: visible;
    z-index: 999;
  }
  
  .select-box .options-container.active + .selected::after {
    margin-top: 3px;
    transform: rotate(-135deg) translateY(-50%);
  }
  
  .select-box .options-container::-webkit-scrollbar {
    width: 8px;
    background: #fff;
    border-radius: 0 8px 8px 0;
  }
  
  .select-box .options-container::-webkit-scrollbar-thumb {
    background: #dadada;
    border-radius: 0 8px 8px 0;
  }
  
  .select-box .option,
  .selected {
    padding: 12px 24px;
    cursor: pointer;
  }
  
  .select-box label {
    cursor: pointer;
    font-family: "Poppins";
    color: orange;
  }
  
  .select-box label:hover {
    color: orange;
  }
  .select-box .option .radio {
    display: none;
  }
  .select-box .optionft .radio {
    display: none;
  }
  .optionft {
    padding: 12px 24px;
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>             &lt;div id="service" class="custom_select flex"&gt;
                &lt;h3 class="textfield_label"&gt;
                  First select
                &lt;/h3&gt;
                &lt;div class="select-box"&gt;
                  &lt;div class="options-container"&gt;&lt;/div&gt;
  
                  &lt;div id="serviceMode" class="selected"&gt;
                    Selecione um Tipo de Serviço
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
   &lt;div id="faturamento" class="custom_select flex"&gt;
                &lt;h3 class="textfield_label"&gt;
                  Second Select
                &lt;/h3&gt;
                &lt;div class="select-box"&gt;
                  &lt;div class="faturamento-container options-container"&gt;&lt;/div&gt;
  
                  &lt;div id="selected-faturamento" class="selected"&gt;
                    Qual o faturamento mensal?
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>gif with problem:</p>
  <p><a href="https://i.stack.imgur.com/uH5hZ.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uH5hZ.gif" alt="enter image description here" /></a></p>