JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
 <div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">AFC
    <span class="caret"></span></button>
  <ul class="dropdown-menu">
   <li><a tabindex="-1" href="#">AFC South</a></li>
   <li class="dropdown-submenu">
    <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
    <ul class="dropdown-menu">
     <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
     <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
     <!--<li class="dropdown-submenu">
            <a class="test" href="#">Another dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">3rd level dropdown</a></li>
              <li><a href="#">3rd level dropdown</a></li>-->
    </ul>
   </li>
  </ul>
 </div>
</div>

JavaScript

$(document).ready(function() {
 $(".dropdown-submenu a.test").on("click", function(e) {
  $(this)
   .next("ul")
   .toggle();
  e.stopPropagation();
  e.preventDefault();
 });
});