How can I use Fuel UX pillbox as an element in a HTML form?

I am playing with Fuel UX pillbox component and I want to make it part of a form I have to submit. Unfortunately, the control does not contain any form element to submit which makes it cool but useless (for me). I added a Input::Hidden element in the HTML code but now I have to force the pillbox component to work with the form element which I am not sure how to do.

 <div class="form-group">
    <label for="{name}" class="col-sm-4 control-label text-right">Tags</label>
    <div class="col-sm-8">
     <div class="pillbox" data-initialize="pillbox" id="pillbox-{name}">
      <ul class="clearfix pill-group">
        <li class="pillbox-input-wrap btn-group">
          <a class="pillbox-more">and <span class="pillbox-more-count"></span> more...</a>
          <input type="text" class="form-control dropdown-toggle pillbox-add-item" placeholder="add item">
          <button type="button" class="dropdown-toggle sr-only">
            <span class="caret"></span>
            <span class="sr-only">Toggle Dropdown</span>
          </button>
          <ul class="suggest dropdown-menu" role="menu" data-toggle="dropdown" data-flip="auto"></ul>
        </li>
      </ul>
      <input type="hidden" name="{name}" id="{name}" value="">
    </div>
  </div>

What I really need is to use JavaScript to update the Input::Hidden element when a new tag is added or removed from the list.

Oh, JavaScript is not my forte.

The Fuel UX component has event for add and remove new tag the probably has to be used but as I mentioned - not sure how to implement it.

If you have any suggestions, please help, or if you have any other suggestions on how to implement the Pillbox component with a HTML form - I am opened to new ideas.

Thanks.