Overlay menu with collapsible list disappears onclick

I am using an overlay menu for my website. I also applied some collapsible functionality on the menu to show sub menu. My problem is that, when I click on main menu to show sub menu, the whole overlay menu disappears. I Am not able to figure our the problem. I am using Bootstrap 4.1.0.

Please help!

Here is my code...

// Menu Overlay
$(document).ready(function() {
  $("#nav-icon").click(function() {
    $(this).toggleClass("animate-icon"), $("#overlay").fadeToggle()
  })
}), $(document).ready(function() {
  $("#overlay").click(function() {
    $("#nav-icon").removeClass("animate-icon"), $("#overlay").toggle()
  })
});

// Show Sub Menu
var coll = document.getElementsByClassName("subMenu");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

#nav-icon {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 30px;
  height: 28px;
  z-index: 10;
  cursor: pointer;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

#nav-icon span {
  position: absolute;
  display: block;
  width: 100%;
  height: 4px;
  background-color: #be9bba;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
}

#nav-icon span:nth-child(1) {
  top: 0px;
}

#nav-icon span:nth-child(2) {
  top: 10px;
}

#nav-icon span:nth-child(3) {
  top: 20px;
}

#nav-icon.animate-icon span:nth-child(1) {
  top: 10px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

#nav-icon.animate-icon span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

#nav-icon.animate-icon span:nth-child(3) {
  top: 10px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

#overlay {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* Overlay positioning */
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 8;
  width: 100%;
  padding-top: 100px;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
}

#overlay ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#overlay ul li {
  padding: 10px 0;
}

#overlay ul li a {
  color: #fff;
  font-size: 200%;
  letter-spacing: 5px;
  text-transform: uppercase;
  font-family: 'Yanone Kaffeesatz', sans-serif;
}

#overlay ul li a:hover {
  color: #ccc;
  text-decoration: none;
}

.subMenu-content {
  max-height: 0;
  font-size: 11px;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="nav-icon">
  <span></span>
  <span></span>
  <span></span>
</div>
<div id="overlay" class="text-center">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#" class="subMenu">Menu 2 &raquo;</a>
      <ul class="subMenu-content">
        <li><a href="#">Sub Menu 1</a></li>
        <li><a href="#">Sub Menu 2</a></li>
        <li><a href="#">Sub Menu 3</a></li>
      </ul>
    </li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
  </ul>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>

Solution

You need to remove onClick JS function for overlay, that will fix the issue. Ideally you don't want to close menu unless someone click on close button

// Menu Overlay
		$(document).ready(function(){
      $("#nav-icon").click(function(){
        $(this).toggleClass("animate-icon")
        $("#overlay").fadeToggle()
      })
    });
      
		
		// Show Sub Menu
		var coll = document.getElementsByClassName("subMenu");
			var i;
			for (i = 0; i < coll.length; i++) {
				coll[i].addEventListener("click", function() {
					var content = this.nextElementSibling;
					if (content.style.maxHeight){
					content.style.maxHeight = null;
				} else {
					content.style.maxHeight = content.scrollHeight + "px";
				} 
			});
		}

#nav-icon {
		  position: absolute;
		  top: 30px;
		  right: 30px;
		  width: 30px;
		  height: 28px;
		  z-index: 10;
		  cursor: pointer;
		  -webkit-transform: rotate(0deg);
		  transform: rotate(0deg);
		  -webkit-transition: .5s ease-in-out;
		  transition: .5s ease-in-out;
		}
		#nav-icon span {
		  position: absolute;
		  display: block;
		  width: 100%;
		  height: 4px;
		  background-color: #be9bba;
		  border-radius: 9px;
		  opacity: 1;
		  left: 0;
		  -webkit-transform: rotate(0deg);
		  transform: rotate(0deg);
		  -webkit-transition: .35s ease-in-out;
		  transition: .35s ease-in-out;
		}
		#nav-icon span:nth-child(1) {
		  top: 0px;
		}
		#nav-icon span:nth-child(2) {
		  top: 10px;
		}
		#nav-icon span:nth-child(3) {
		  top: 20px;
		}
		#nav-icon.animate-icon span:nth-child(1) {
		  top: 10px;
		  -webkit-transform: rotate(135deg);
		  transform: rotate(135deg);
		}
		#nav-icon.animate-icon span:nth-child(2) {
		  opacity: 0;
		  left: -60px;
		}
		#nav-icon.animate-icon span:nth-child(3) {
		  top: 10px;
		  -webkit-transform: rotate(-135deg);
		  transform: rotate(-135deg);
		}
		#overlay {
		  display: -webkit-box;
		  display: -ms-flexbox;
		  display: flex;
		  /* Overlay positioning */
		  display: none;
		  position: absolute;
		  left: 0;
		  top: 0;
		  z-index: 8;
		  width: 100%;
		  padding-top: 100px;
		  height: 100%;
		  background: rgba(0, 0, 0, 0.9);
		}
		#overlay ul {
		  margin: 0;
		  padding: 0;
		  list-style: none;
		}
		#overlay ul li {
			padding: 10px 0;
		}
		#overlay ul li a {
			color: #fff;
			font-size: 200%;
			letter-spacing: 5px;
			text-transform: uppercase;
			font-family: 'Yanone Kaffeesatz', sans-serif;
		}
		#overlay ul li a:hover {
			color: #ccc;
			text-decoration: none;
		}
		.subMenu-content {
			max-height: 0;
			font-size: 11px;
			overflow: hidden;
			transition: max-height 0.2s ease-out;
		}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="nav-icon">
        <span></span>
        <span></span>
        <span></span>        
    </div>        
    <div id="overlay" class="text-center">            
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Menu 1</a></li>
            <li><a href="#" class="subMenu">Menu 2 &raquo;</a>
            	<ul class="subMenu-content">
                	<li><a href="#">Sub Menu 1</a></li>
                	<li><a href="#">Sub Menu 2</a></li>
                	<li><a href="#">Sub Menu 3</a></li>
                </ul>
            </li>
            <li><a href="#">Menu 3</a></li>
            <li><a href="#">Menu 4</a></li>
        </ul>
    </div>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>