Bootstrap Dropdown not working with dynamic html

Question

Read what some have posted and using w3schools.com as a reference. Here is what I have, I am dynamically creating html code in javascript and calling the html id and inserting the dynamic code via the .innerHTML property. I have the right links and script references (in my HTML).

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

My JavaScript (.js file)

var htmlHeader = '<div class="dropdown">' +
    '<th class="header">Notifies Details</th>' +
    '<th class="header" style="font-weight:bold; font-size:18px; text-align:right;">' +
        '<a href="javascript:triggerDropDown()"><span class="glyphicon glyphicon-filter dropdown-toggle" data-toggle="dropdown"></span></a>' +
        '<a href="javascript:hideDivById(&quot;notifiesDetailsDiv&quot;)">&times;</a></th>' + 
    '<ul class="dropdown-menu">' +
        '<li><a href="#">Due Date</a></li>' +
        '<li><a href="#">RSU</a></li>' +
    '</ul>' +
    '</div>';


document.getElementById("notifyDetailstheadId").innerHTML = htmlHeader;
document.getElementById("notifyDetailstbodyId").innerHTML = htmlTable;  

Ultimately this is in the header of a table with a title (Notifies Details) on the left and a filter icon and the 'X' on the right side. When the filter icon is clicked I want the menu to show.

I also tried adding this JavaScript to get it to trigger to no avail

    console.log("triggerDropDown() ran");
$(document).ready(function() {
    $(".dropdown-toggle").dropdown();
});