JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<ul data-role="listview" id="listviewForLastTenCalls">
    <li><a href="#">Static</a>

    </li>
</ul>
<br/>
<form>
    <fieldset data-role="controlgroup" data-type="horizontal">
        <legend>Test options:</legend>
        <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2a" value="on" checked="checked">
        <label for="radio-choice-h-2a">Static only</label>
        <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2b" value="off">
        <label for="radio-choice-h-2b">Dynamic and Static</label>
    </fieldset>
</form>

JavaScript

// this listens to both dynamic and static
$(document).on('click', '#listviewForLastTenCalls li a', function (e) {
    if ($('#radio-choice-h-2b').is(':checked')) {
        $('form').after($(this).text() + ' was clicked <br/>');
    }
});

// this listens to static only
// when "Dynamic and Static" is checked
// click event will trigger twice for static items
var i = 0;
$('#listviewForLastTenCalls li a').on('click', function (e) {
    i++;
    $('form').after($(this).text() + ' was clicked ' + i + ' times<br/>');
});

// append new item dynamically
$('#listviewForLastTenCalls').append('<li><a href="#">Dynamic</a></li>').listview('refresh');