JSFiddle - React, Tailwind, and code Playground

by hamix

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<form class="form-group multiple-form-group">
                                    <div class="input-group">
                                        <div class="input-group-btn search-panel" id="div0"> 
                                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                                <span id="search_concept">Phone type</span> <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu" role="menu" id="ul0">
                                                <li>
                                                    <a href="#phone" class="radio_click">
                                                        Phone <input type="radio" name="cell_no" class="clicked_rad">
                                                    </a>
                                                </li>

                                                <li>
                                                    <a href="#mobile" class="radio_click">
                                                        Mobile <input type="radio" name="cell_no" class="clicked_rad">
                                                    </a>
                                                </li>

                                                <li>
                                                    <a href="#work" class="radio_click">
                                                        Work <input type="radio" name="cell_no" class="clicked_rad">
                                                    </a>
                                    ...

CSS

ul.dropdown-menu {
	width:422px;
	text-align: center;
	margin-top: -1px;
	border-radius: 0;
}


.dropdown-menu li {
	display: inline-block;
	padding:5px;
	width:33.3%;
}

JavaScript

$('#div0 #ul0').find('a').click(function() {
        var param = $(this).attr("href").replace("#","");
        var concept = $(this).text();
        $('#div0 span#search_concept').text(concept);
        $('.input-group #search_param').val(param);
    $(this).find('input[type=radio]').prop('checked',true);
    });

$('#div1 #ul1').find('a').click(function() {
        var param = $(this).attr("href").replace("#","");
        var concept = $(this).text();
        $('#div1 span#search_concept').text(concept);
        $('#div1 #search_param').val(param);
    $(this).find('input[type=radio]').prop('checked',true);
    });

$(".radio_click").on("click",function(){
    $(this).find(".clicked_rad").click();
  });