JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<title>Dropdown</title>
</head>

<ul class="nav nav-pills">
  <li class="active"><a href="#">Regular link</a></li>
  <li class="dropdown" id="menu1">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
      Dropdown
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </li>
  ...
</ul>

</body>
</html>

CSS

body { margin: 10px; }

.dropdown-menu { paddin-top: 5px; }

.dropdown-menu label {
  padding: 0 10px;
}

.dropdown-menu input {
  margin-right: 5px;
  float: left;
}

JavaScript

$('.dropdown-menu').on('click', 'li', function(event) {
  var add, checkbox, tag;

  add = $(this).find('a.add');

  if (add.length > 0) {
    tag = prompt(add.attr('data-prompt'), '');
    $(this).parent().prepend('<li><label>' + tag + '</label></li>');
  }

  event.stopPropagation();
});