JSFiddle - React, Tailwind, and code Playground

by zzzrefiddle

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<select id="options" class="form-control">
	<option disabled="disabled" selected="selected">select one</option>
	<option>org</option>
	<option>Grp</option>
</select>
<div id="con"></div>

<!-- <div id="org"></div>
<div id="Grp"></div> -->

JavaScript

$(document).ready(function(){
      $("#options").on('change',function(){
      	var form=`<form action="/action_page.php">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  
</form>`;
      	var id=new Date().getTime();
      	var optval=$("#options option:selected").text();
      		$("#con").append("<h5>"+optval+"</h5>"+"<a href='#' class='btn btn-success' id='additem"+id+"'>New Item</a><ul  class='nav nav-pills' id='itemgroups"+id+"'></ul><div class='tab-content ' id='itemgroupscont"+id+"'></div>");
      		$("#additem"+id).on('click',function(){
      			var id2=new Date().getTime();
      			$("#itemgroups"+id).append("<li ><a data-toggle='tab' href='#itemform"+id2+"' >New Tab</a></li>");
      			$("#itemgroupscont"+id).append("<div class='tab-pane ' id='itemform"+id2+"' >"+form+"</div>");
      		})
      });

	})