JSFiddle - React, Tailwind, and code Playground

by theacadian

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<div class="ui-grid-a">
    <div class="ui-block-a" style="width:35%">
        <div data-role="controlgroup" data-type="horizontal">
            <a href="#" data-role="button">A</a>
            <a href="#" data-role="button">B</a>
            <a href="#" data-role="button">C</a>
            <a href="#" data-role="button">D</a>
            <a href="#" data-role="button">E</a>
            <a href="#" data-role="button">F</a>
        </div>        
        <div data-role="controlgroup" data-type="horizontal">
            <a href="#" data-role="button">G</a>
            <a href="#" data-role="button">H</a>
            <a href="#" data-role="button">I</a>
            <a href="#" data-role="button">J</a>
            <a href="#" data-role="button">K</a>
            <a href="#" data-role="button">L</a>
        </div> 
        <div data-role="controlgroup" data-type="horizontal">
            <a href="#" data-role="button">M</a>
            <a href="#" data-role="button">N</a>
            <a href="#" data-role="button">Ñ</a>
            <a href="#" data-role="button">O</a>
            <a href="#" data-role="button">P</a>
            <a href="#" data-role="button">Q</a>
        </div> 
        <div data-role="controlgroup" data-type="horizontal">
            <a href="#" data-role="button">R</a>
            <a href="#" data-role="button">S</a>
            <a href="#" data-role="button">T</a>
            <a href="#" data-role="button">U</a>
            <a href="#" data-role="button">V</a>
            <a href="#" data-role="button">W</a>
        </div>         
        <div data-role="controlgroup" data-type="horizontal">
            <a href="#" data-role="button">X</a>
            <a href="#" data-role="button">Y</a>
            <a href="#" data-role="button">Z</a>
            <a href="#"...

JavaScript

$('#ItemEliminar').addClass('ui-disabled');
$("[data-role=button]").click(function(e){
    var filter_el = $(".ui-input-text");
    var filter_val = filter_el.val();
    var filter_query = filter_val+$(this).text();
    filter_el.val(filter_query);
    filter_el.trigger("change")
});