title: How I can make event listener(change) fot items with vanilla JS
body: <p>How do I run the same action for each event. When the user selects an option, I need to show a table. And when they select another, show another table. But the tables were getting shown one by one. So I added an action for removing, but now the table only appears half the time. How can I make a select event lister, that does not disappear after the second click and not repeat tables</p>
  <pre><code>function getTableRegion(select, divResutl) {
      select.addEventListener('change', function (ev) {
          cleanMessage(divResutl);
          console.log(ev)
          if (document.getElementById('table')) {
              divResutl.removeChild(document.getElementById('table'))
          } else {
              let tbody = document.createElement('tbody');
              let table = document.createElement('table');
              table.id = 'table';
              table.setAttribute('style', 'display:table');
              tbody.innerHTML = `&lt;tr&gt;&lt;th&gt;Country name&lt;/th&gt;
                                   &lt;th&gt;Capital&lt;/th&gt;&lt;th&gt;World region&lt;/th&gt;&lt;th&gt;Languages&lt;/th&gt;
                                    &lt;th&gt;Area&lt;/th&gt;&lt;th&gt;Flag &lt;/th&gt;&lt;/th&gt;&lt;/tr&gt;`;
              table.append(tbody);
              divResutl.append(table);
          }
      })
  }
  </code></pre>
  <p>Thank you</p>