After opening and closing modal, it won't open again

Hey I am currently working on the 10th techdegree project and I got stuck at the modal. I wanted to work first on the modal, making sure It is displayed once you click on a div and then close after clicking on X . It works the first time, but after I close the modal and click on the div again it does not appear. I struggled to solve it on my own , but I ended up with a headache. Please help! Any advice is well received. Thanks in advance!

************************HTML***********************

<div id='employee-list' class='clearfix employee-list'> <!-- The 12 EMPLOYEE placed using JS --> </div> <!-- End Employee list with JS -->

<div id="modal" class='clearfix modal-bg'> <div id="window-modal" class='modal-content'> <span class="close-btn">×</span> <div id="content-modal" class='content-modal'> <!-- Employee info when selected --> </div>

   </div>


        </div> <!-- END of MODAL -->

************************CSS***********************

.modal-bg{

visibility: hidden; background-color: rgba(0,0,0,0.3); /* Black w/ opacity */ border: 1px solid #666666; width: 30%; height: 50%; position:absolute; bottom: 10%; left: 35%; overflow:visible; }

.modal-bg.active{ text-align: center; visibility: visible; }

.modal-content { visibility: hidden;

}

.modal-content.active { visibility: visible; }

.close-btn { color: #696969 ; float: right; font-size: 28px; font-weight: bold; padding: 10px; }

.close-btn:hover, .close-btn:focus { color: #2a2a2a; text-decoration: none; cursor: pointer; }

************************JavaScript***********************

$('.employee-list').on('click', function() { $('.modal-bg, .modal-content').addClass('active'); });

$('.close-btn, .modal-bg').on('click', function() {
    $('.modal-bg, .modal-content').removeClass('active');



});