JSFiddle - React, Tailwind, and code Playground

by nosfan1019

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<span id='aaa'>&nbsp;</span>
<span id='bbb'>&nbsp;</span>

<div class='dropdown' id='aa'>
    <a class='dropdown-toggle' data-toggle='dropdown' href='#'>Email <b class="caret"></b></a>
    <ul id='menu1' class='dropdown-menu'>
        <li><a href='#'>One</a></li>
        <li><a href='#'>Two</a></li>
        <li><a href='#'>Three</a></li>
    </ul>
</div>

<div class='dropdown' id='bb'>
    <a class='dropdown-toggle' data-toggle='dropdown' href='#'>Email <b class="caret"></b></a>
    <ul id='menu1' class='dropdown-menu'>
        <li><a href='#'>AAA</a></li>
        <li><a href='#'>BBB</a></li>
        <li><a href='#'>CCC</a></li>
    </ul>
</div>

CSS

div {
    margin: 50px;
}

span {
    display: block;
}

#bbb {
    color: green;
}

JavaScript

$(document).on('click','.dropdown ul a',function(){
        text = $(this).text(); 
        $(this).closest('.dropdown').children('a.dropdown-toggle').text(text + " ").append('<b class="caret"></b>');
    
        var asdf = $(this).parent().parent().parent();
        
        if (asdf.is('#aa')) {
            $('#aaa').text(text);
        }
        else if (asdf.is('#bb')) {
            $('#bbb').text(text);
        }

        $(div + ' input').focus(function () {
            $(div + ' span').html(menu.innerHTML);
            $(div + ' span' + ' a.dropdown-toggle').text(text + " ").append('<b class="caret"></b>');
        });
    
    });