I have encountered an issue while attempting to set a value in the sessionStorage. The problem lies in storing the sessionStorage "key" differently based on the item clicked. For instance, if I click on the first view chat, I should store a key of "1", and for the second view chat, a key of "2". These keys are derived directly from the ajax call below. Each HTML element is duplicated based on the number of entries received from the AJAX "GET" method call. Therefore, each box below has a unique sessionStorage "key" that needs to be set when clicking on the respective box's "view chat".

https://i.sstatic.net/2ogkP.png HTML File

<!-- Main content -->
<section class="content">

    <!-- Default box -->
    <div class="card card-solid">
      <div class="card-body pb-0">
        <div id="chatItemBox" class="row d-flex align-items-stretch">
          <div class="col-12 col-sm-6 col-md-4 d-flex align-items-stretch chatItemBox">
            <div class="card bg-light">
              <div id="chatItemBoxUsername" class="card-header text-muted border-bottom-0">
                Digital Strategist
              </div>
              <div class="card-body pt-0">
                <div class="row">
                  <div class="col-7">
                    <h2 class="lead"><b id="chatItemBoxName">Nicole Pearson</b></h2>

                    <strong><i class="fas fa-envelope mr-1"></i> Email</strong>

                    <p id="chatItemBoxEmail" class="text-muted">HI
                    </p>

                    <hr>

                    <strong><i class="fas fa-phone mr-1"></i> Contact</strong>

                    <p id="chatItemBoxContact" class="text-muted">HI
                    </p>

                    <hr>

                  </div>
                  <div class="col-5 text-center">
                    <img src="../../dist/img/user1-128x128.jpg" alt="" class="img-circle img-fluid">
                  </div>
                </div>
              </div>
              <div class="card-footer">
                <div class="text-right">
                  <a href="view-chat.html" class="btn btn-sm bg-teal" onclick="sessionStorage.setItem('chatId', chatId)">
                    <i class="fas fa-comments"></i> View Chat
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- /.card-body -->
      <div class="card-footer">
        <nav aria-label="Contacts Page Navigation">
          <ul class="pagination justify-content-center m-0">
            <li class="page-item active"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">4</a></li>
            <li class="page-item"><a class="page-link" href="#">5</a></li>
            <li class="page-item"><a class="page-link" href="#">6</a></li>
            <li class="page-item"><a class="page-link" href="#">7</a></li>
            <li class="page-item"><a class="page-link" href="#">8</a></li>
          </ul>
        </nav>
      </div>
      <!-- /.card-footer -->
    </div>
    <!-- /.card -->

  </section>
  <!-- /.content -->

Script

    $.ajax({
        url: 'http://localhost:8080/Retail-war/webresources/chat/retrieveChatsForUserForMerchant/' + uId,
        type: 'GET',
        dataType: 'json',
        // Fetch the stored token from localStorage and set in the header
        headers: { "Authorization": 'Bearer ' + sessionStorage.getItem('accessToken') },

        success: function (data) {
            // Get all chatItemBox by class
            var chatItemBox = document.getElementsByClassName('chatItemBox');

            console.log(chatItemBox)

            // Get the last one
            var lastChatItemBox = chatItemBox[chatItemBox.length - 1];

            count = 0

            $.each(data, function (key, entry) {
                var chatItemBoxUsername = document.getElementById('chatItemBoxUsername').innerHTML = entry.createdBy.username
                var chatItemBoxName = document.getElementById('chatItemBoxName').innerHTML = entry.createdBy.name
                var chatItemBoxEmail = document.getElementById('chatItemBoxEmail').innerHTML = entry.createdBy.email
                var chatItemBoxContact = document.getElementById('chatItemBoxContact').innerHTML = entry.createdBy.contactNumber

                // Clone it
                var newChatItemBox = lastChatItemBox.cloneNode(true);
                newChatItemBox.className = 'col-12 col-sm-6 col-md-4 d-flex align-items-stretch chatItemBox' + count;

                count = count + 1

                console.log(newChatItemBox);

                document.getElementById('chatItemBox').appendChild(newChatItemBox)
                console.log(entry)
            })
            $('.chatItemBox').attr('id',  'toHide')
            $('#toHide').remove();
            console.log(data)
        },
        error: function (xhr, status, err) {
            alert(err);
        }
    });