JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="page" id="jidlo">

<div data-role="header" data-position="fixed">
 	
	<div data-role="navbar">
		<ul>
			<li><a href="#jidlo" class="ui-btn-active ui-state-persist">one</a></li>
			<li><a href="#napoje">two</a></li>
		</ul>
		</div><!-- /navbar -->	
 </div>

  <div data-role="main" class="ui-content">

    <a data-role="button" data-type="button" class="button">Add 1</a>
  </div>

 
</div> 

<div data-role="page" id="napoje" data-title="Pane Vrchní - Nápoje">
		
  <div data-role="header" data-position="fixed">
    
	<div data-role="navbar">
		<ul>
			<li><a href="#jidlo">one</a></li>
			<li><a href="#napoje" class="ui-btn-active ui-state-persist">two</a></li>
		</ul>
		</div><!-- /navbar -->	
  </div>

  <div data-role="main" class="ui-content">
     <a data-role="button" data-type="button" class="button">Add 1</a>
  </div> 

</div> 

<div data-role="page" id="ucet" data-title="Pane Vrchní - Účet">
<div data-role="header" data-position="fixed">
 	
	<div data-role="navbar">
		<ul>
			<li><a href="#jidlo">one</a></li>
			<li><a href="#napoje">two</a></li>
		</ul>
		</div><!-- /navbar -->	
 </div>

  <div data-role="main" class="ui-content" id="mujUcet">
      <h2 class='ucet_nadpis'>Moje objednávky: <span class="objednavka"></span></h2>
      <ul data-role="listview" id="muj_ucet">
	  </ul>
  </div>

</div>

JavaScript

$('<div>').attr({'data-role':'footer','data-theme':'a','data-position':'fixed','data-id':'footer', 'data-tap-toggle': "false"}).append('\
   		 	<div data-role="navbar">\
			  <ul>\
				<li class="lii"><a href="#mypanel" data-icon="shop">Order (<span class="objednavka">0</span>)</a></li>\
				<li><a href="#ucet" data-icon="gear" >My acc</a></li>\
			  </ul>\
		</div>').appendTo('#jidlo, #napoje, #ucet');    
		
		var cisloKliku = 1;
		$( document ).on( 'click', '.button', function () {
				$( ".objednavka" ).text(cisloKliku)
            
				cisloKliku++;
			});