Prevent webform from submitting when clicking button in markup component

I have a very complex webform in a Drupal 7 website I've inherited. I have added a markup component which builds a button and added some JS that links this button to trigger a modal window to open. In the modal a block is displayed which contains a view listing some user profiles.

When I visit the webform everything functions normally and I can click the button to open the modal, but when revisiting a draft submission the button triggers the webform to be submitted. I have been looking around for answers and trying lots of different things but nothing seems to be able to stop the button submitting the form. If I change the markup to use a different tag such as a span tag then it doesn't submit. The markup is exactly the same inside the two forms (initial submission and draft edit) but the behavior is different!

So the question is, does anyone know a way to prevent buttons in markup components from submitting the form they are inside?

The form is absolutely massive so I don't think it's useful to post the markup of the whole thing here, but the button looks like this:

<button id="ref-1-modal-trigger" class="ref-modal-trigger button--gold" data-ref-number="1">Button Name</button>

And the JS looks like this:

// Get the button that opens the modal
        var btnRef1 = document.getElementById("ref-1-modal-trigger");
// When the user clicks on the button, open the modal
        btnRef1.onclick = function() {
            refNumber = btnRef1.getAttribute("data-ref-number");
            modalRef1.style.display = "block";
            modalRef1.setAttribute('data-ref-number', refNumber);
        }

The basics of the project:

• Drupal 7
• Webform module

Thanks in advance!