How to find what button was clicked in Materialize modal?

I was using tingle.js and pikday and now I want to use materialize css because it got both modal and day picker.

In tingle I add buttons and the action after button click easily

//add a button
modal.addFooterBtn('Button label', 'tingle-btn tingle-btn--primary', function() {
    // here goes some logic
    modal.close();
});

// add another button
modal.addFooterBtn('Dangerous action !', 'tingle-btn tingle-btn--danger', function() {
    // here goes some logic
    modal.close();
});

I set up few buttons in Materialize https://jsfiddle.net/radek/onzx31q6/6/ but I do not know how to find out what button was clicked on.

 <div class="modal-footer">
    <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
    <a href="#!" class=" modal-action modal-close waves-effect waves-red btn-flat">Disagree</a>
    <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
  </div>

Solution

You could use a custom attribute to keep track of which button was clicked for Materialize which is how I did it below.

(() => {
  // the Modal.onClose event handler
  const onCloseEnd = (modal) => {
    const last = document.querySelector(`#${modal.id}`).getAttribute('data-clicked');
    document.querySelector('#last-clicked').innerText = last;
  };

  // set up modals
  const nodes = document.querySelectorAll('.modal');
  const modals = M.Modal.init(nodes, {
    onCloseEnd
  });

  // add event for footer buttons to change data-clicked property
  nodes.forEach(node => {
    node.querySelectorAll('.modal-footer a')
      .forEach(btn => {
        btn.addEventListener('click', evt => {
          node.setAttribute('data-clicked', evt.target.innerText);
        }, true);
      });
  });
})();

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" media="screen,projection" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>

  <button data-target="modal1" class="btn modal-trigger">Modal</button>

  <h5>You clicked: <span id="last-clicked">nothing</span></h5>

  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
      <a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat">Disagree</a>
      <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
    </div>
  </div>

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>

</html>