Modal overlay not closing by default, errors when explicitly accessed with jquery

I created an overlay.

  <div class="overlay modal" id="11">
    <div class="background-overlay"></div>
      <div class="description">
        <div class="hidden-xs">
          <img src='img.jpg'/>
        </div>
      <div class="text">
        <p> Hand Wash Monitor </p>
        <p class='proj-title'> Android+Octave </p>
    </div>
  </div>
 </div>

      

        
        
        
      

    

The bootstrap is then used to open this overlay.

<div class="col-md-4" id="1" data-toggle="modal" data-target="#11">
  <span class="glyphicon glyphicon-phone"></span>
  <h2>Android Programming</h2>
  <p> some text</p>
</div>

      

        
        
        
      

    

I need the overlay to be closed when the Overlay button is clicked, so I created a jquery onclick listener.

$(document).ready(function(){
$('.background-overlay').on('click',function(){

$('.overlay').hide();
// $('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
  });
});

      

        
        
        
      

    

As expected, the above code opens my overlay when clicking on the appropriate section and closes when clicking on the background.

However, there is a slight glitch when I open the overlay, I just need one click to open it. When I try to open it a second time, I need to double click on it to open it.

The problem is that I am using data toggle function to open, but jquery onclick closes it.

What is an alternative way to do this so I can just use one click to open my overlay every time and close when clicking on the background-overlay.

This is how it looks, try opening and closing the same modals again

https://pradeepsaiu.github.io/src/index.html