JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
 
<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-success my_data_flag active" id="one">
        <input name="options" type="radio" checked> ONE </input>
    </label>
    <label class="btn btn-success my_data_flag" id="two">
        <input name="options" type="radio"> TWO </input>
    </label>

    <div class="btn-group">
        <label id="xyz" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
            <span id="text"> More Options </span><span class="caret"></span>
        </label>
        <ul class="dropdown-menu" id="divNewNotifications">
            <li><a class="my_data_flag" id="three"> THREE </a></li>
            <li><a class="my_data_flag" id="four"> FOUR </a></li>
        </ul>
    </div>
</div>


<!-- the following only works if after the above html -->
<script>
    $('.dropdown-toggle').dropdown();
    $('#divNewNotifications li > a').click(function(){
    if (this.text !== ' More Options ') {
        $('#text').text($(this).html());
        $('.my_data_flag').removeClass('active');
        $('#xyz').addClass('active');
    }
    });
</script>