Function in JS' Element

[talkinggoat]

Background: I am trying to create a button in an element that copies the text of the element to the clipboard. I have created the button, successfully.

Problem: I can't access the function that copies the text of the element to the clipboard. Am I doing something wrong?

HTML:

<div class="fabrikElementReadOnly" id="job_types___position_shareable_link_ro">
    <div id="job_types___position_shareable_link_ro" class="fabrikinput fabrikElementReadOnly">
        https://mywebsite.org/index.php/volunteer-positions/details/49/2
    </div>
    <button id="link_button" onclick="copyButtonText();">
        <i id="copy_link" class="fa fa-copy">
        </i>
    </button>
</div>

JS:

function copyButtonText() {
  var copyText = document.getElementById('job_types___position_shareable_link_ro').textContent;
  document.execCommand('copy');
  alert("Copied the text: " + copyText);
  }
 
var jobTypes = document.getElementById('job_types___position_shareable_link_ro');
var create_button = document.createElement('button');
jobTypes.appendChild(create_button).id = 'link_button';
var link_button = document.getElementById('link_button');
var create_i = document.createElement('i');
create_button.appendChild(create_i).id = 'copy_link';
var copyButton = document.getElementById('copy_link');
copyButton.className = 'fa fa-copy';
link_button.setAttribute('onclick','copyButtonText()');

When I type the function into the console, everything works fine, but when I try to run it in Fabrik, it can't find the function. I see the function in the source, but it's still no-go. I have tried putting the function at the beginning and end of the script, but it makes no difference.

EDIT: If I manually enter the function into the console, it works as expected, so, apparently, I'm not understanding how Fabrik handles the function?