title: I don't know how to submit a multiple tag inputs
body: <p>I found a YouTube tutorial that showed me how to create a multiple tag input field but I couldn't figure out how to save the inputs (as JSON) to my Django models.
  I am new to JavaScript, so I don't know what to do here.</p>
  <p>My goal is to submit the tag inputs along with other inputs in my HTML form</p>
  <h2>JavaScript</h2>
  <pre><code>const ul = document.querySelector(&quot;ul[name=features-ul]&quot;),
  input = document.querySelector(&quot;input[name=features]&quot;),
  tagNumb = document.querySelector(&quot;.tag-details span&quot;);
  
  let maxTags = 16,
  tags = [&quot;coding&quot;];
  var features = {&quot;input[name=features]&quot; : tags}
  
  countTags();
  createTag();
  
  function countTags(){
      input.focus();
      tagNumb.innerText = maxTags - tags.length;
  }
  
  function createTag(){
      ul.querySelectorAll(&quot;li&quot;).forEach(li =&gt; li.remove());
      tags.slice().reverse().forEach(tag =&gt;{
          let liTag = `&lt;li&gt;${tag} &lt;i class=&quot;uit uit-multiply&quot; onclick=&quot;remove(this, '${tag}')&quot;&gt;&lt;/i&gt;&lt;/li&gt;`;
          ul.insertAdjacentHTML(&quot;afterbegin&quot;, liTag);
      });
      countTags();
  }
  
  function remove(element, tag){
      let index  = tags.indexOf(tag);
      tags = [...tags.slice(0, index), ...tags.slice(index + 1)];
      element.parentElement.remove();
      countTags();
  }
  
  function addTag(e){
      if(e.key == &quot;Enter&quot;){
          let tag = e.target.value.replace(/\s+/g, ' ');
          if(tag.length &gt; 1 &amp;&amp; !tags.includes(tag)){
              if(tags.length &lt; 16){
                  tag.split(',').forEach(tag =&gt; {
                      tags.push(tag);
                      createTag();
                  });
              }
          }
          e.target.value = &quot;&quot;;
      }
  }
  
  input.addEventListener(&quot;keyup&quot;, addTag);
  
  const removeBtn = document.querySelector(&quot;.tag-details button&quot;);
  removeBtn.addEventListener(&quot;click&quot;, () =&gt;{
      tags.length = 0;
      ul.querySelectorAll(&quot;li&quot;).forEach(li =&gt; li.remove());
      countTags();
  });
  
  $(document).ready(function() {
      $(window).keydown(function(event){
        if(event.keyCode == 13) {
          event.preventDefault();
          return false;
        }
      });
    });
  </code></pre>
  <h2>html</h2>
  <p>Property Features: </p>
  <pre><code>                                        &lt;div class=&quot;tag-wrapper&quot;&gt;
                                          &lt;div class=&quot;tag-content&quot;&gt;
                                            &lt;p&gt;Press enter or add a comma after each tag&lt;/p&gt;
                                            &lt;ul name=&quot;features-ul&quot;&gt;&lt;input type=&quot;text&quot; id=&quot;features&quot; spellcheck=&quot;false&quot; name=&quot;features&quot;&gt;
                                          &lt;/ul&gt;
                                          &lt;/div&gt;
                                          &lt;div class=&quot;tag-details&quot;&gt;
                                            &lt;p&gt;&lt;span&gt;16&lt;/span&gt; tags are remaining&lt;/p&gt;
                                            &lt;button&gt;Clear All Tags&lt;/button&gt;
                                          &lt;/div&gt;
                                        &lt;/div&gt;
  
                                      &lt;/div&gt;
  </code></pre>