Twitter Bootstrap NavBar dropdown remains open when button click - html

Question

Would like to ask I have a simple application in the navbar which consist a button like below snippet.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
This should close when click <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
<li role="separator" class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Do not close when button click <span class="caret"></span>
<ul class="dropdown-menu">
<li style="text-align:center">
<button class="btn btn-default" type="submit">Button</button>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
How should I code it in such a way that when the button in the dropdown menu is clicked and it should not close the dropdown? Also the css should only appect that particular dropdown menu and not the others?
Note : please run code in full page.

Answer 1

I gave the ul element the id "dropstop" ,and applied this following jquery code:
$('#dropstop').click(function(event){
event.stopPropagation();
});
This is the JSfiddle for it.
I found the jquery code from this post : Stack Overflow Post