Update sidebar widget when different ticket is opened

Update sidebar widget when different ticket is opened

Hi,

I'm writing a small Private Zoho Desk integration that shows in the marketplace sidebar on tickets. 
I'm able to show the ticket details. However, when I open a different ticket, the details don't update. How can I make the widget update itself to reflect the current ticket information. This is the HTML that I wrote:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Information Display</title>
</head>
<body>
  <div id="userInfo">Loading user information...</div>
  <div id="ticketInfo">Loading ticket information...</div>
  <div id="dateTime">Current Date and Time: </div>
  <script type="text/javascript">
    window.onload = function () {
      ZOHODESK.extension.onload().then((App) => {
        // Display the current date and time in ISO 8601 format
        const now = new Date();
        document.getElementById('dateTime').textContent = 'Current Date and Time: ' + now.toISOString();

        // To get the particular property of the user
        ZOHODESK.get("user.fullName").then(function (userResponse) {
          console.log(userResponse["user.fullName"]);
          document.getElementById('userInfo').textContent = 'User Full Name: ' + userResponse["user.fullName"];
        }).catch(function (error) {
          console.error('Failed to get user full name:', error);
          document.getElementById('userInfo').textContent = 'Failed to load user information.';
        });

        // To get the ticket ID
        ZOHODESK.get("ticket.id").then(function (response) {
          console.log(response["ticket.id"]);
          document.getElementById('ticketInfo').textContent = 'Ticket ID: ' + response["ticket.id"];
        }).catch(function (err) {
          console.error('Failed to get ticket ID:', err);
          document.getElementById('ticketInfo').textContent = 'Failed to load ticket information.';
        });

        console.log(App);
      });
    }
  </script>
</body>
</html>