Here is my for each in question:

(function() {
    //for legend tags
    const editText = (text) => `<p class="d-inline"><</p><p class="d-inline">${text.replace('<','').replace('>','')}</p><p class="d-inline">></p>`;
    $.ajax({
        type: "GET",
        url: "/clinical/bbr-message-template-legend-list",
        dataType: "json",
        success: function (response){
            var tbody="";
            $.each(response.all_legends, function (key, legend) {
            tbody+='<tr>'+
                        '<td><a href="#" onclick="myFunction()">'+editText(legend.value)+'</a></td>'+
                        '<td>'+legend.text+'</td>'+
                    '</tr>';

            });
            $('#legend-list tbody').html(tbody)
        }
    });

I am trying to get an alert popping whenever I click on the tags below (blue)

Attempting to use a function at: <a href="#" onclick="myFunction()">

but whenever I try to use a function inside or outside ajax, my function is not being read:

function myFunction() {
  alert("I am an alert box!");
}

errors:

How do I get my function to be read?

Error in the console:

message-template:1 Uncaught ReferenceError: myFunction is not defined
    at HTMLAnchorElement.onclick