JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="page" id="buttonPage">
  <div data-role="header">
    <h1>dynamic button theme</h1>

  </div>
  <div data-role="content">
    <a href="#" id="my-button2" data-role="button" data-theme="e">Cambio</a>
<br/>
<br/>
<br/>
<br/>
    <a href="#" id="c" data-role="button" data-theme="c">Blanco</a>
    <a href="#" id="e" data-role="button" data-theme="e">Amarillo</a>

  </div>
</div>

JavaScript

$(document).on('pagecreate', '#buttonPage', function () {


    $('#c').bind('click', function () {
        $('#my-button2').attr("data-theme", "c").removeClass("ui-btn-up-e").addClass("ui-btn-up-c");
        $('#my-button').attr("data-theme", "c").removeClass("ui-btn-up-e").addClass("ui-btn-up-c");
        $('#my-button').button('refresh');
    });

    $('#e').bind('click', function () {
        $('#my-button2').attr("data-theme", "e").removeClass("ui-btn-up-c").addClass("ui-btn-up-e");
        $('#my-button').attr("data-theme", "e").removeClass("ui-btn-up-c").addClass("ui-btn-up-e");
        $('#my-button').button('refresh');
    });


});