Uncaught ReferenceError: function is not defined : Can not call my function with onclick button [solved]

I have got the weird errors from browser when I was trying to add individual events to each buttons that I have created in table. It has never happened before till now. Can someone tell me where is my blind spot? thanks

Here is how I generate the table with callback function from response data:

$("#bulletin .card-body tbody").html("")
$.each(data.content, function(index, item){
  var type = $("#bulletin .card-header button").eq(item.type-1).text()
  var res = 
   '<tr>'+
    '<td>'+parseInt(index+1)+'</td>'+
    '<td>'+item.announcement+'</td>'+
    '<td>'+type+'</td>'+
    '<td>'+item.announcement+'</td>'+
    '<td>'+item.createdTime+'</td>'+
   '<td><button class="btn btn-dark" onclick="openBulletinDetails(\'' + item.id + '\')">details</button</td>'+
  '</tr>';
 $("#bulletin .card-body tbody").append(res)
})

And there you go the callback:

function openBulletinDetails(id){
  console.log(id)
}

I can only got this error

Uncaught ReferenceError: openBulletinDetails is not defined

I request the data from restful API using ajax to get that JSON if it helps.

function generateTable(){   
  // XHR
  $.ajax({
     url: url,
     type: "GET",
     dataType: "json",
     beforeSend: function(xhr) {
        xhr.setRequestHeader("Authorization", "bearer " + globalAuthToken);
     },
     success: function(data) {
         // generate the table here....
     },
     error: function(data) {
        alert(data.status);
     }
  });  
}
function openBulletinDetails(id){
  console.log(id)
}

Problem solved!!!

The reason why I got this error is because >> I set my external js file as module type. None of logic were wrong. But why is that stopping the onclick events? no clue...if anyone knows the reason, kindly give me some response.