Solution:1
Inline handlers are horrible practice. They have very ugly quote escaping issues (that you’re running into here) and have a demented scope chain. There should be no reason to use them in modern JavaScript. Consider passing the values to the HTML some other way, and then attaching the handlers properly using JavaScript instead.
For example, you could use data attributes for each button, or you could echo JSON into a script tag that contains the parameters:
$button_data = array(
'example 1, example 2, example 3'
// add more button data here as needed
);
<script type="button-data">
<?php echo json_encode($button_data) ?>;
</script>
Then read it in JS and attach listeners:
const buttonData = document.querySelector('script[type="button-data"]');
// change this selector as needed
// to select only the buttons you care about
const buttons = document.querySelectorAll('button');
buttons.forEach((button, i) => {
button.addEventListener('click', () => {
testFunction(buttonData[i]);
});
});