(jquery tab ui) how to prevent unlimited jquery tab creation

Question

I created this site that uses jquery ui tabs for its navigation interface with this particular draggable tab plugin:

https://jsfiddle.net/lifeto/ryhzwkph/16/

And notice how the tabs can be opened unlimited times when you click multiple times on the 'menu1'.

i would like to limit the number to 1 but i don't just want to write a code that limits the opening, but rather i want to give the each tab a unique id, so that as long as the id is still there in the opened tabs, it won't reopen the same menu.

What i am trying to do with the jquery ui tab is that, basically making a program bar you can find on the windows system or dock in the mackintosh, where a program gets opened on demand, and be 'highlighted' when it's opened, won't get opened again when the same software is still opened, and finally, switch back to the already opened program window when i click on that program, while im working on the other software.

I am not sure if i put everything under clear context, but those are the things that i would like to see and implemented.

can anyone help me out?

here is the js script that i use for the tabs,

$(function() {
  $(".tabpanel").tabs({
      closable: true,
      addTab: true
    }).tabs('overflowResize')
    .find(".ui-tabs-nav").sortable({
      distance: 10
    });
});


jQuery('.menu_a').on('click', function() {
  jQuery('.tabpanel').tabs('add', 'title', '<iframe frameborder=0     src=naver.com class=frame_board></iframe>')
});

thanks.

and just in case here is the live site that has problem : http://lifeto.cafe24.com/xe/

Answer 1

Set a condition like so: https://jsfiddle.net/Twisty/ryhzwkph/17/

var maxTabs = 10;
$('.menu_a').on('click', function() {
  if ($(".tabpanel li").length >= maxTabs) {
    return false;
  }
  $('.tabpanel').tabs('add', 'title', '<iframe frameborder=0 src=naver.com class=frame_board></iframe>')
});

Hope that helps.