JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Select Items <span class="caret"></span>
  </button>
  <ul class="dropdown-menu reddy" role="menu">
      <li><input type="text" class="form-control"><button id="createnew" type="button"class="btn btn-primary btn-xs">Create New</button></li>
      <li><a href="#"><label for="menuitem1"><input type="checkbox" id="menuitem1" /> Menu Item 1</label></a></li>
      <li><a href="#"><label for="menuitem2"><input type="checkbox" id="menuitem2" /> Menu Item 2</label></a></li>
      <li><a href="#"><label for="menuitem3"><input type="checkbox" id="menuitem3" /> Menu Item 3</label></a></li>
  </ul>
</div>

CSS

.form-control{max-width:140px;float:left;margin-right:5px;margin-left:10px;}
.btn{margin-top:5px;}
.open>.dropdown-menu{width:250px;}

JavaScript

$('ul.dropdown-menu.reddy').on('click', function(event){
    event.stopPropagation();
});

$("#createnew").on("click", function() {    
	var $dropdown = $(".dropdown-menu.reddy");
	var menuItemNo = $dropdown.find("li").length;
	var menuItemId = "menuitem" + menuItemNo;    

	$dropdown.append("<li><a href='#'><label for='" + menuItemId + "'><input type='checkbox' id='" + menuItemId + "' checked='checked' /> Menu Item " + menuItemNo +"</label></a></li>");
});