Locking a dynamic generated html table from external J.S

got html j.s webpage
have html table with tbody id Tag that gets populated by Java script , not fixed rows
the example in Adding a Lock to Web Page | Unlock Protocol
and added theunlock-content class to the element
but still the generated table body data showing
any ideas how to fix this ?

my code is :

<html>
  <head>
    <meta charset="UTF-8" />
<style>
			tbody.unlock-content.locked tr {
				display: none; 
			}
			tbody.unlock-content.unlocked tr {
			display: table-row;
			}
			
			.unlock-content {
				display: none;
			}

			.unlock-content .locked {
				display: none;
			}
			.unlock-content .unlocked {
				display: none;
			}

// +another css for the tables

</style>
<script>
		(function(d, s) {
			var js = d.createElement(s),
			sc = d.getElementsByTagName(s)[0];
			js.src = "https://paywall.unlock-protocol.com/static/unlock.latest.min.js";
			sc.parentNode.insertBefore(js, sc); }(document, "script"));
		</script>
		<script>
		
		var unlockProtocolConfig = {
		locks: {
        '0x4850c262cd90f96cd4e6ac1d7dda5e0efdea62e7': {
          name: '1 day access',
          network: 137, 
        },
        '0xf1b8cab051d63ae708c9fb8dde63f46b5676f6a3': {
          name: '7 days access',
          network: 137, 
        },
        '0xfda28da23eb1e3b9b3f7cfd92fad353e9c86bc79': {
          name: '30 Day Access',
          network: 137, 
        },
      },
			"icon": "https://unlock-protocol.com/static/images/svg/unlock-word-mark.svg",
			"callToAction": {
			"default": "Please unlock this demo!"
			}
		}
		</script>
</head>
<body>
		<h1>List</h1>
		<p class="unlock-content locked">Please subscribe to show the data using Polygon USDT</p>
		<p class="unlock-content unlocked">Gracias you are Subscribed please refresh the page to show data 🎉</p>
		<p class="unlock-content locked" onclick="window.unlockProtocol && window.unlockProtocol.loadCheckoutModal()"><button class="button">
			Subscribe & show Data
		</button></p>
		<br>
		<br>
		<h1>Binance Trading Pairs</h1>
  
  
  <div class="left">
    <div id="usdt-loading-bar"></div> 
    <table id="usdt-table">
      <thead>
        <tr>
          <th onclick="sortTable('usdt', 0)">USDT Pairs<span id="usdt-sort-icon" class="sort-icon"></span></th>
          <th onclick="sortTable('usdt', 1)">Price<span id="usdt-price-sort-icon" class="sort-icon"></span></th>
          <th onclick="sortTable('usdt', 2)"> (4h)<span id="usdt-4h-sort-icon" class="sort-icon"></span></th>
          <th onclick="sortTable('usdt', 3)"> (1d)<span id="usdt-1d-sort-icon" class="sort-icon"></span></th>
          <th onclick="sortTable('usdt', 4)"> (1w)<span id="usdt-1w-sort-icon" class="sort-icon"></span></th> 
        </tr>
      </thead>
      <tbody id="usdt-table-body" class="unlock-content">
      </tbody>
    </table>
  </div>
  <div class="right">
    <div id="btc-loading-bar"></div>
    <table id="btc-table">
      <thead>
        <tr>
          <th onclick="sortTable('btc', 0)">BTC Pairs<span id="btc-sort-icon" class="sort-icon"></span></th>
          <th onclick="sortTable('btc', 1)">Price<span id="btc-price-sort-icon" class="sort-icon"></span></th> 
          <th onclick="sortTable('btc', 2)">(4h)<span id="btc-4h-sort-icon" class="sort-icon"></span></th>
          <th onclick="sortTable('btc', 3)">(1d)<span id="btc-1d-sort-icon" class="sort-icon"></span></th>
          <th onclick="sortTable('btc', 4)">(1w)<span id="btc-1w-sort-icon" class="sort-icon"></span></th>
        </tr>
      </thead>
      <tbody id="btc-table-body" class="unlock-content">
      </tbody>
    </table>
  </div> 
	
  </body>
  
  <script>
		
		document.addEventListener("DOMContentLoaded", () => {
			setTimeout(() => {
      }, 0);
		});
		
		
		window.addEventListener("unlockProtocol.status", function (event) {
		// We hide all .unlock-content elements
		document.querySelector(".unlock-content").style.display = "none";
		// We show only the relevant element
		document
		.querySelectorAll(`.unlock-content.${event.detail.state}`)
		.forEach((element) => {
		element.style.display = "block";
		});
		});
		window.addEventListener("unlockProtocol.authenticated", function (event) {
		// event.detail.addresss includes the address of the current user, when known
		});

		window.addEventListener("unlockProtocol.transactionSent", function (event) {
		// event.detail.hash includes the hash of the transaction sent
		});
		
		document.getElementById("usdt-table-body").classList.add("unlocked"); 
		document.getElementById("btc-table-body").classList.add("unlocked");
	</script>
<script>t/// path to able-data.js </script>
</html>