JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<div data-role="collapsible" data-collapsed="false">
<h3>This is an item 1</h3>
<p><a href="/echo/html/" class="sabPauRes" data-ajax="false" data-role="button" data-inline="true" data-request="resume">Resume Download</a></p>
</div>
<div data-role="collapsible" data-collapsed="false">
<h3>This is an item 2</h3>
<p><a href="/api/?resume=fhdh54" class="sabPauRes" data-ajax="false" data-role="button" data-inline="true" data-request="resume">Resume Download</a></p>
</div>
<div data-role="collapsible" data-collapsed="false">
<h3>This is an item 3</h3>
<p><a href="/api/?resume=fhdh55" class="sabPauRes" data-ajax="false" data-role="button" data-inline="true" data-request="resume">Resume Download</a></p>
</div>
<div id="resultLog"></div>
</div>
<script>
$(document).on("pageinit", "#page1", function(){
$(document).on("click", "a.sabPauRes", function(event){
event.preventDefault();
$this = $(this);
alert($this.text());
$.ajax({
type: "GET",
url: this.href,
cache: false,
dataType: "text",
success: function (data){
// validate the result of the ajax call, update text, change button...