'add action menu dynamically using jquery in power portals

I need to create a new menu item in the entity list called download. The html currently looks like this :

<td aria-label="action menu">
 <div class="dropdown action">
     <button class="btn btn-default btn-xs aria-exp" data-toggle="dropdown" aria-expanded="false" aria-label="action menu"> 
       <span class="fa fa-chevron-circle-down fa-fw" aria-hidden="true"></span>
     </button>
     <ul class="dropdown-menu" role="menu" style="position: fixed;">
       <li role="none">
           <a class="edit-link" role="menuitem" tabindex="-1" href="mypage?id=2f7d48cf-e98a-ec11-b820-0003ff6ac000" title="Edit" aria-setsize="1" aria-posinset="1">Edit</a>
       </li>
    </ul>
 </div>
</td>

I just need to append two more li underneath it. The JQuery that is used so far can load the html but I am stuck on how to append a menu item.

var list = $(".entity-grid")
list.on("loaded", function () {

if (list.find(".view-grid .table tbody tr td:last-child ul.dropdown-menu > li > a.details-link, .view-grid .table tbody tr td:last-child ul.dropdown-menu > li > a.edit-link, .view-grid .table tbody tr td:last-child ul.dropdown-menu > li > a.deactivate-link, .view-grid .table tbody tr td:last-child ul.dropdown-menu > li > a.delete-link, .view-grid .table tbody tr td:last-child ul.dropdown-menu > li > a.disassociate-link").length > 0) {
        var rows = $(this).find(".view-grid .table tbody tr td:last-child");
        $.each(rows, function (index, row) {
             //add new menu item here
             console.log('download PDF');
        });
    }

}); 


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source