JSFiddle - React, Tailwind, and code Playground

HTML

<div>Added function to check only mouse click action</div>
<div style="width:100%;border-bottom:1px solid black;">
    <button class="delete-pages">Show Buttons</button>
</div>
<ul id="projectPageList">
    <li id="page_1">
        <button style="float:right;" class="delete-page"> <i class="fa fa-trash-o">del</i>

        </button> <a class="page" href="#page1">Page 1</a>

    </li>
    <li id="page_2">
        <button style="float:right;" class="delete-page"> <i class="fa fa-trash-o">del</i>

        </button> <a class="page" href="#page2">Page 2</a>

    </li>
    <li id="page_3">
        <button style="float:right;" class="delete-page"> <i class="fa fa-trash-o">del</i>

        </button> <a class="page" href="#page3">Page3</a>

    </li>
</ul>

CSS

a {
    text-decoration:none;
}
li {
    list-style: none;
    width: 200px;
    border:1px dashed #e5e5e5;
}
li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
}
.delete-page {
    display:none;
    position:relative;
    z-index:999;
}
.active {
    display:block;
}

JavaScript

$('button.delete-pages').click(function (e) {
    var btn = $(this);
    $('button.delete-page').toggleClass('active');
    btn.toggleClass('active');
});

$(document).mouseup(function (e) {
    var delBtn = $(".delete-page");
    var tglBtn = $(".delete-pages");

    if (!delBtn.is(e.target) && !tglBtn.is(e.target) && (delBtn.has(e.target).length === 0) && (tglBtn.has(e.target).length === 0)) {
        delBtn.removeClass('active');
        tglBtn.removeClass('active');
    }
});