Make overflow menu item save to dropdown

Question

I want make my site top menu like yplann when window resize the overflow item will hide and move to dropdown.

https://yplanapp.com/

But I have no idea how to do this. Currently I'm only using this:

if ($(window).width() > 767 && $(window).width() < 1200) {
  var menu_item = [],
      menu_link = [],
      tab_menu_selector = $('.dropdown_tablet > ul');

  $('.main-navbar > li:not(.dropdown_tablet)').each(function(i, items_list){

    if (i > 2) {
      menu_item.push($(this).text());
      menu_link.push($(this).find('a').attr('href'));
      $(this).remove();
    }
  });

  $.each(menu_item, function(i, v) {
    tab_menu_selector.append('<li><a href="' + menu_link[i] + '">' + v + '</li>');
  });

  $('li.dropdown_tablet').show();
}

the slice code of HTML

<li><a href="#4">Market</a></li>
<li><a href="#4">Market</a></li>
<li><a href="#5">Sports</a></li>
<li class="dropdown_tablet">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">OTHER <span class="caret"></span></a>
  <ul class="dropdown-menu">
  </ul>
</li>

It only shows 2 menu items, and moves another item to the dropdown menu and only works on refresh page not when the window resizes, I don't know how to achieve moving overflow menu item 1 by 1 to Dropdown like http://yplanapp.com