JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />

<!-- Software update page -->
<div data-role="page" id="software-update-page">
    <div data-role="header">
        <h1>Software Update</h1>
    </div><!-- /header -->
    <div data-role="content">   
    <h1>Select Software version:</h1>
    <ul data-role="listview" id="updateVersionsList">
      <li><a id="updateVersionItem-0">0.0</a></li>
      <li><a id="updateVersionItem-1">0.1</a></li>
      <li><a id="updateVersionItem-2">0.2</a></li>
    </ul>
    <br>
    <a data-role="button" class="ui-btn-left" id="refreshUpdateButton">Refresh Update list</a>
    </div><!-- /content -->
</div>

JavaScript

$(document).ready(function() {
  $("#refreshUpdateButton").on("click", function(event, ui) {
    console.log("refreshUpdateButton")

    versions = ["0.3", "0.4", "0.5"]

    for (var i=0; i < versions.length; i += 1) {
      $("#updateVersionsList").append('<li><a id="updateVersionItem-' + (i+3) + '">' + versions[i] + '</a></li>');
      if ($("#updateVersionsList").hasClass('ui-listview')) {
        $("#updateVersionsList").listview("refresh");
      } else {
        $("#updateVersionsList").trigger('create');
      }
    }

  })

  $('[id^=updateVersionItem]').on("click", function(event, ui) {
    alert("updateVersion, selected = " + $(this).attr('id'));
  })

});