Navbar mobile not closing

I have a simple navbar:

<nav class="navbar navbar-expand-lg"> 
      <button onclick="myFunction()" class="navbar-toggler" type="button" data-toggle="collapse" id="navBtn" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="ion-android-menu"></span> </button>
      <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
          <ul class="navbar-nav">
              <li>
                  <a class="nav-link" href="@Url.Action("Index", "Home")"><i class="fa fa-home fa-1x"> Home</i> </a>
              </li>                 
          </ul>
      </div>
 </nav>

And 2 scripts:

<script>
    $('.navbar-collapse a').click(function () {
        $(".navbar-collapse").collapse('hide');
        $("#navBtn").attr('aria-expanded', false);
    });
</script>

<script>
    $(document).mouseup(function (e)
    {  
        var container = $(".collapse");

        if (!container.is(e.target) // if the target of the click isn't the container...
            && container.has(e.target).length === 0) // ... nor a descendant of the container
        {
           // $(".collapse").slideUp();
            // remove class
            $("#navBtn").attr('aria-expanded', false);
            $("#navbarSupportedContent").removeClass("show");
        }

    }); 
</script>

What I want is that the sandwich menu (as they call those 3 horizontal stacked stripes) closes when clicked on the X (once it's opened). It open's fine and when clicked everywhere outside the menu, it closes. But when clicked on the X it closes but imediately reopens ...

What can I do to achieve this? I have no errors in the console (inspect element) and I have tried tweaking the add/remove class and analyzed the behavior in the inspect element but I don't know why this happens ... Thank you!