JSFiddle - React, Tailwind, and code Playground

HTML

<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"></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"></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"></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');
});