Event listener not added in chrome extension

Question

Follow up to:

Submit data from content script injected form (chrome extension)

The on click event listener is not added in the following content script ( I'm trying to send a message from an injected form to a content script using

https://developer.chrome.com/docs/extensions/mv2/messaging/ ):

add-extension-content-script.js:

var form_element = htmlToElement(
    `
        <form>
            <label for="fname">First name:</label><br>
            <input type="text" id="fname" name="fname" value="John"><br>
            <button id="idSendButton" type="button" class="btn btn-secondary">Send</button>
        </form> 
    `
);

var current_title_bar = document.getElementById("global-nav");
current_title_bar.appendChild(form_element); // <= OK, this gets added 

document.getElementById("idSendButton").addEventListener('click', function () {
    console.log('We don\'t get here :( ' + document.getElementById("fname").value);
    chrome.runtime.sendMessage({"name" : document.getElementById("fname").value}, function(response) {
        console.log('Got response: ' + response.farewell);
      });

Why isn't the listener called? There are no events raised/console output when clicking the button.