How to add dynamic buttons with click listener in chrome extension development?

Question

I am developing a chrome extension to save and manage currently opened tabs. The Options page contains a left side bar containing list of clickable items. Right side shows the contents of the currently selected item and a floating Add button that should append a dynamic clickable li item on the list. This new li element should also contain a delete button with listener for deleting the item.

Chrome extensions don't support inline javascript and inline click listener. And as a solution we can add listeners on load of page to already existing / static buttons with the help of their selector. As shown here and here

But how do we add dynamic buttons with listeners.

<div class="session-list">
   <ul id="session-list-content">

   </ul> 
</div>


// add button should perfom this 
var txt = `<li class="${cls}" onclick="showSession()">
            <div class="session-title">${session.name}</div>
            <div class="session-date">${date}</div>
            <button onclick="removeSession(${session.id})">Delete</button>
            </li>`;
$('#session-list-content').append($(txt));

Error thrown: Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.