Unable to click on an input (type=image) inside of a section tag

Question

I am unable to click on an input => image that is embedded inside of section tag (id="documents_sidebar_section").

I have a sidebar (nav tag) on the left-hand side of my webpage, that lists several options that control features on the main part of the page (right-hand side). Some of the options in the sidebar dynamically load information beneath the options when a specific list item < li > is clicked on.

<nav id="sidebar">
    <div class="panel-group p-2" id="accordion">
        <ul class="list-unstyled components mb-5">
            <li>
                <a href="javascript:toggleTimeline();"><span class="fa fa-clock-o mr-3"></span> Timeline </a>
            </li>
            <li>
                <a href="javascript:togglePeopleSidebar();"><span class="fa fa-address-book mr-3"></span> People </a>
            </li>
            <li>
                <a href="javascript:toggleDocumentsSidebar();"><span class="fa fa-folder-open mr-3"></span> Documents</a>
            </li>
        </ul>
    </div>
    <div id="mission_control_section" style="display: none;"></div>
    <div id="countries_section" style="display: none;"></div>
    <div id="times_section" style="display: none;"></div>
    <div id="people_sidebar_section" style="display: none;"></div>
    <div id="documents_sidebar_section" style="display: none;"></div>
</nav>

As you can see, below the <div class="panel-group p-2" id="accordion"> there are several hidden divs that will be used to display dynamic information.

This data is loaded through a PHP database connection and then the DOM elements are created using JavaScript.

The specific section that is causing the difficulty is the documents_sidebar_section. Below you can see the functions that are used to create the HTML tags and add event listeners.

Some of the documents that are loaded will also have audio files attached to them. If so, the function audioDocumentClicked(media_id) creates an image with a click event to play the audio file.

However, I am unable to click on the image. Only the section registers the click event (even if I remove the event listener for the section).

I have tried changing the z-index of the input image. I have tried changing the pointer-events CSS, which may be the culprit but no matter what value I change, the click event is never registered on the image.

section > * {
    /* Make everything within the timeline sections clickable */
    pointer-events: none; 
}

I am also using Bootstrap which may be conflicting with some of the CSS or JS???

// This function creates a 'section' for each document (i.e., PDF) found in a mission
//      and adds them to the left sidebar so they can be clicked on
function addDocumentsCards(document_arr) {
    if (document_arr.length == 0) {
        console.log("document array is empty");
        return;
    }

    document_arr.forEach(doc => {
        // Build the DOM HTML element
        var sect = document.createElement('section');
        sect.setAttribute('class', 'document_card');
        sect.setAttribute('id', 'section_' + doc.media_id);

        // Add an event listener if the document's card is clicked on
        sect.addEventListener('click',function(e){
            if (e.target.id){
                documentSectionClicked(e.target.id);
            }
        });

        var h5 = document.createElement('h5');
        h5.innerHTML = doc.title;
        h5.setAttribute('class', 'document_name');

        var p = document.createElement('p');
        p.innerHTML = doc.subtitle;
        p.setAttribute('class', 'document_description');

        sect.appendChild(h5);
        sect.appendChild(p);

        // Check to see if there is an audio file for this document
        if (doc.corresponding_media_id > 0) {
            // Add an input button image with an event listener
            var audio_but = document.createElement('input');
            audio_but.setAttribute('type', 'image');
            audio_but.setAttribute('src', 'images/audio_icon.png');
            audio_but.setAttribute('class', 'audio_icon');
            audio_but.setAttribute('position', 'block');
            // audio_but.setAttribute('z-index', '20');
         
            // Add an event listener if the document's card is clicked on
            audio_but.addEventListener('click',function(e){
                //if (e.target.id){
                    audioDocumentClicked(doc.corresponding_media_id);
                //}
            });
            sect.appendChild(audio_but);
        }

        var dss = document.getElementById('documents_sidebar_section');
        dss.appendChild(sect);
    });
}

// Called when a section from the documents_sidebar_section is clicked
//    declared dynamically inside addEventListener
function documentSectionClicked(id) {
    console.log("document section clicked: " + id);
    
    // Find the appropriate document and place it in the pdf-viewer
    documents.forEach(doc => {
        if ("section_" + doc.media_id == id) {
            document.getElementById("pdf-viewer").style.display = "block"; 
            var doc_location = "../VAC/" + doc.directory;
            document.getElementById("embed-pdf-viewer").src = doc_location;
        }
    });
}

// Called when the audio button from the documents_sidebar_section is clicked
//      The media_id of the audio_file is passed to the function
function audioDocumentClicked(media_id) {
    console.log("audio document clicked: " + media_id);
    
    // Find the appropriate document and place it in the pdf-viewer
    media.forEach(med => {
        if (med.media_id == media_id) {
            var audio_location = med.directory;
            document.getElementById('audio_src').src = audio_location;
            var aud = document.getElementById('audio');
            console.log(document.getElementById("audio").style.display);
            document.getElementById("audio").style.display = "block"; 
            console.log(document.getElementById("audio").style.display);
            aud.load();
            aud.play();
        }
    });
}