多个按钮不同的属性循环

<div id="button-container"></div>

const buttonsData = [
  { id: 'btn1', class: 'btn-primary', value: 'Button 1', disabled: false },
  { id: 'btn2', class: 'btn-secondary', value: 'Button 2', disabled: true },
  { id: 'btn3', class: 'btn-success', value: 'Button 3', disabled: false }
];

const container = document.getElementById('button-container');

buttonsData.forEach(buttonData => {
  const button = document.createElement('button');
  button.id = buttonData.id;
  button.className = buttonData.class;
  button.value = buttonData.value;
  button.disabled = buttonData.disabled;
  container.appendChild(button);
});

buttonsData.forEach(buttonData => {
  const button = document.createElement('button');
  button.id = buttonData.id;
  button.className = buttonData.class;
  button.value = buttonData.value;
  button.disabled = buttonData.disabled;

  button.addEventListener('click', () => {
    alert(`Button ${buttonData.value} clicked!`);
  });

  container.appendChild(button);
});