JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<ul class="nav navbar-top-links navbar-right">
<li>
<div class="btn-group">
<button data-toggle="dropdown" class="btn-xs btn-info dropdown-toggle" id="id_granularity_dropdown"><span id="sampVal" class="sampVal">Auto Sampling</span> <span class="caret"></span></button>
<ul class="dropdown-menu" id="list">
</ul>
</div>
</li>
<li>
<div class="btn-group">
<button data-toggle="dropdown" class="btn-xs btn-info dropdown-toggle" id="id_granularity_dropdown2"><span id="sampVal2" class="sampVal">No Auto Sampling</span> <span class="caret"></span></button>
<ul class="dropdown-menu" id="list2">
</ul>
</div>
</li>
</ul>
CSS
.nav li {display:inline-block;margin-right:10px;}
JavaScript
$(document).ready(function(){
populateLi();
})
$(function() {
$(".dropdown-menu").on("click","li a",function(){
a = $(this).closest("a");
var getSampling = a.text();
$(this).closest(".dropdown-menu").prev().text(getSampling);
});
});
function populateLi()
{
$("#id_granularity_dropdown2").find(".dropdown-menu").empty();
insertLi('list2',"#",'1115 min Sampling');
insertLi('list2',"#",'3000 min Sampling');
insertLi('list2',"#",'no Hourly min Sampling');
insertLi('list2',"#",'no Daily min Sampling');
$("#id_granularity_dropdown").find(".dropdown-menu").empty();
insertLi('list',"#",'5 min Sampling');
insertLi('list',"#",'30 min Sampling');
insertLi('list',"#",'Hourly min Sampling');
insertLi('list',"#",'Daily min Sampling');
}
function insertLi (ID,HREF,VALUE) {
ul = document.getElementById(ID);
a= document.createElement("a");
a.appendChild(document.createTextNode(VALUE));
a.setAttribute("href", HREF);
li = document.createElement("li");
li.appendChild(a);
ul.appendChild(li);
}