JSFiddle - React, Tailwind, and code Playground

HTML

down vote
favorite
<div>
    <div>
        <button id="storageList" type="button" class="btn-phn btn btn-dropdown-white-uk dropdown-toggle col-xs-12" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">64gb 
        </button>
        <ul id="storagedrop" class="dropdown-menu col-xs-12 p-l-0">
            <li> <a href="#">64gb</a> </li>
            <li> <a href="#">32gb</a> </li>
            <li> <a href="#">16gb</a> </li>       
            <li> <a href="#">8gb</a> </li>
        </ul>       
    </div>
    <div>
        <button id="colorList" type="button" class="btn-phn btn btn-dropdown-white-uk dropdown-toggle col-xs-12" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Gold 
        </button>
        <ul id="colordrop" class="dropdown-menu col-xs-12 p-l-0">
         
        </ul>       
    </div>
</div>

JavaScript

$("#storagedrop > li").click(function(event)
														 {
          											var storageListData = $(this).text();
                                var colordrop=$("#colordrop"); 
                                colordrop.empty();
                               	
                                child="<li>"+storageListData+"</li>";
                                colordrop.append(child);
                             }
          );