JSFiddle - React, Tailwind, and code Playground

by marianico2

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css">
<form>
    <input id="search-brand-input" data-type="search">
</form>
<ul id="search-brands" class="ul-brands ui-controlgroup ui-controlgroup-vertical ui-corner-all" data-role="listview" data-filter="true" data-autodividers="true" data-input="#search-brand-input" data-enhanced="true" data-inset="true">
    <li><a href="#">lol</a>
    </li>
</ul>
<div id="lastest-brands">Recently used:
    <ul id="lastest-brands-listview" class="ul-brands ui-controlgroup ui-controlgroup-vertical ui-corner-all" data-role="listview" data-inset="true"></ul>
</div>
    
    <button id="addit">addit</button>

JavaScript

$(document).ready(function () {

    $('ul.ul-brands').on('click', 'li a', function (e) {
        alert('clicked');
        e.preventDefault();
    });

    $("#addit").on("click", function () {
        $("#lastest-brands-listview").empty();

        var html_result = "";

        for (var i = 0; i < 5; i++) {
            html_result += "<li data-value='" + i + "'><a href='#'  >" + i + "</a></li>";
        }

        $("#lastest-brands-listview").html(html_result);
        $("#lastest-brands-listview").listview("refresh");


    });
});