sfHover issue in nav menu

I have a menu in my WordPress site. The code never adds "open" on click, I don't know why.

When i click, it has another code that adds "sfHover" class in #menu-item-300.

$(document).ready(function() {
  $('#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4').click(function() {
    $(this).toggleClass('open');
  });
});

  <li id="menu-item-300" class="mega-menu menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor menu-item-has-children menu-item-300">
    <a>
      <div id="nav-icon1">
        <span></span>
        <span></span>
        <span></span>
      </div>
      <span role="presentation" class="dropdown-menu-toggle" aria-expanded="false"></span>
    </a>
  </li>

It works in codepen, when sfHover its not added. But if sfHover its added, "open" its not added.