Access and Modify Custom Data Attributes on DOM Elements

function manageDataAttributes(elementId) {
  const element = document.getElementById(elementId);
  if (!element) {
    console.error('Element not found.');
    return;
  }

  // Read a data attribute
  const userId = element.dataset.userId; // For data-user-id
  const status = element.dataset.status; // For data-status
  console.log(`Element #${elementId} - User ID: ${userId}, Status: ${status}`);

  // Set/update a data attribute
  element.dataset.status = 'active'; // Sets data-status="active"
  element.dataset.lastUpdated = new Date().toISOString(); // Sets data-last-updated

  console.log(`Updated data-status to: ${element.dataset.status}`);
  console.log(`Added data-last-updated: ${element.dataset.lastUpdated}`);

  // Remove a data attribute
  delete element.dataset.status; // Removes data-status
  console.log(`data-status removed. Current status: ${element.dataset.status}`);
}

// Example Usage:
// <button id="myButton" data-user-id="123" data-status="pending">Click Me</button>
// manageDataAttributes('myButton');