JSFiddle - React, Tailwind, and code Playground

HTML

<div class="btn-group">
   <button data-toggle="dropdown" class="btn btn-success dropdown-toggle">Success <span class="caret"></span></button>
      <ul class="dropdown-menu">
         <li><a href="#">Action</a></li>
         <li><a href="#">Another action</a></li>
         <li><a href="#">Something else here</a></li>
         <li class="divider"></li>
         <li><a href="#">Separated link</a></li>
      </ul>
</div><!-- /btn-group -->
            <div class="btn-group">
   <button data-toggle="dropdown" class="btn btn-info dropdown-toggle">Info <span class="caret"></span></button>
      <ul class="dropdown-menu" id="states">
         <li><a href="#">Action</a></li>
         <li><a href="#">Another action</a></li>
         <li><a href="#">Something else here</a></li>
         <li class="divider"></li>
         <li><a href="#">Separated link</a></li>
      </ul>
</div><!-- /btn-group -->

JavaScript

var states = [
    "Kansas",
    "Oklahoma",
    "Texas"    
];

$('.dropdown-menu > li > a').click(function() {
    yourFunction(this.text);
});

function yourFunction(val) {
        
    if ( val === "Action" ) {
        $('#states').html('');
        for ( var i in states ) {
            $('#states').append("<li><a href='#'>" + states[i] + "</a></li>");
        }
    }
    
}