Manage Custom Data Attributes with JavaScript `dataset`

// Assume you have the following HTML:
// <button id="myButton" data-action="submit" data-user-id="123" data-status="active">Click Me</button>

const myButton = document.getElementById('myButton');

if (myButton) {
  // 1. Accessing data attributes (camelCase conversion for JS)
  const action = myButton.dataset.action;       // 'submit'
  const userId = myButton.dataset.userId;       // '123' (data-user-id becomes userId)
  const status = myButton.dataset.status;       // 'active'

  console.log(`Action: ${action}, User ID: ${userId}, Status: ${status}`);

  // 2. Modifying data attributes
  myButton.dataset.status = 'inactive';
  console.log('Updated status:', myButton.dataset.status); // 'inactive'

  // 3. Adding a new data attribute
  myButton.dataset.timestamp = Date.now();
  console.log('New timestamp:', myButton.dataset.timestamp);

  // 4. Removing a data attribute
  delete myButton.dataset.status;
  console.log('Status after removal:', myButton.dataset.status); // undefined

  // 5. Iterating through all data attributes
  console.log('All data attributes:');
  for (const key in myButton.dataset) {
    console.log(`  data-${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${myButton.dataset[key]}`);
  }

  // The HTML element's attributes will reflect these changes:
  // <button id="myButton" data-action="submit" data-user-id="123" data-timestamp="1678886400000">Click Me</button>
}