title: Change html layout of page based on Tagify tags
body: <p>I have a tagify input where for each tag that is added I have a dropdown box to specify some rating for that tag. Say 1-5.</p>
  <pre><code>&lt;input id=&quot;generic-skills&quot; class=&quot;tagify&quot; tabindex=&quot;-1&quot;/&gt;
  </code></pre>
  <pre><code>let genericSkillsInput = document.querySelector(&quot;#generic-skills&quot;);
      let genericSkills = new Tagify(genericSkillsInput, {
          whitelist: [],
          maxTags: 10,            // &lt;- maximum allowed selected tags
          dropdown: {
              maxItems: 10,       // &lt;- maxumum allowed rendered suggestions
              enabled: 0,         // &lt;- show suggestions on focus
              closeOnSelect: true // &lt;- do not hide the suggestions dropdown once an item has been selected
          }
      });
  </code></pre>
  <p>I want to then have a list of dropdown boxes below this list that is modified every time a tag is added/removed.</p>
  <pre><code>&lt;div id=&quot;generic-skills-dropdowns&quot; class=&quot;offset-1 col-sm-4 pad-all&quot;&gt;
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;label&gt;tag name&lt;/label&gt;
          &lt;select class=&quot;form-control kt-select2&quot; id=&quot;kt_select2_2&quot; name=&quot;param&quot;&gt;
              &lt;option&gt;1&lt;/option&gt;
              &lt;option&gt;2&lt;/option&gt;
              &lt;option&gt;3&lt;/option&gt;
              &lt;option&gt;4&lt;/option&gt;
              &lt;option&gt;5&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I know that I can have an event handler like so:</p>
  <pre><code>async function onGenericSkillsTagsChange(e) {
      const {name, value} = e.target;
  
      const dropdowns = $('#generic-skills-dropdowns');
      const newDropdown =
          &quot;&lt;div class='form-group'&gt;\n&quot; +
          &quot;    &lt;label&gt;&quot;+ name +&quot;&lt;/label&gt;\n&quot; +
          &quot;    &lt;select class='form-control kt-select2' id='kt_select2_2' name='param'&gt;\n&quot; +
          &quot;        &lt;option&gt;1&lt;/option&gt;\n&quot; +
          &quot;        &lt;option&gt;2&lt;/option&gt;\n&quot; +
          &quot;        &lt;option&gt;3&lt;/option&gt;\n&quot; +
          &quot;    &lt;/select&gt;\n&quot; +
          &quot;&lt;/div&gt;&quot;;
      dropdowns.append(newDropdown);
  }
  
  genericSkills.DOM.originalInput.addEventListener('change', onGenericSkillsTagsChange);
  </code></pre>
  <p>but this doesn't specify whether a tag was added or removed, just gives a list of all current tags. So how can I keep track of which tags are in the input?</p>