tabs getting adding again and again

Question

I am using jquery UI tabs and when i call them on success callback it will create two extra tabs if its JSON data from server, it works well the first time and it happens inside a modal, the modal is also closed and reopened, but model is not destroyed, the strucure is build in such a manner that destroy of modal might not work properly here

so the code below adds the tabs, but the moment i close the modal and reopen it again, it adds two more with same name and details, so it keeps on appending

success: function(response) {
      var tabTitle1 = response.title1; // replace with how you access your title in data
      var tabContent1 = response.msg1 + "\n" + response.label1 + "\n" + response.textData1 + "\n" + response.content1; // replace with how you access your content in data
      var tabTitle2 = response.title2;// replace with how you access your title in data
      var tabContent2 = response.msg2 + "\n" + response.label2 + "\n" + response.textData2 + "\n" + response.content2; // replace with how you access your content in data

      var tabTemplate = "<li><a href='#{href}'>#{label}</a></li>";
      var id1 = "tabs-" + ( $("#tabs li").length + 1 );
      var id2 = "tabs-" + ( $("#tabs li").length + 2 );

      var li1 = $( tabTemplate.replace( /#\{href\}/g, "#" + id1 ).replace( /#\{label\}/g, tabTitle1 ) );
      var li2 = $( tabTemplate.replace( /#\{href\}/g, "#" + id2 ).replace( /#\{label\}/g, tabTitle2 ) );

      $("#tabs").find( ".ui-tabs-nav" ).append( li1 );
      $("#tabs").append( "<div id='" + id1 + "'>" + tabContent1 + "</div>" );

      $("#tabs").find( ".ui-tabs-nav" ).append( li2 );
      $("#tabs").append( "<div id='" + id2 + "'>" + tabContent2 + "</div>" );

      $("#tabs").tabs( "refresh" );
    },

something is up and can't figure out the time of me what is going on