如何动态添加新选项卡?

我需要你的帮助,

我的要求是双重的。我想提出一个功能,在点击按钮时,能够动态地:

1. 如果我的ul中没有标签。选项卡、创建和添加一个。,然后选择它并显示其内容。

2. 如果我的ul中已经有任何标签。选项卡,将新选项卡添加到下一个选项卡。,选择它,并显示其内容。

这是我到目前为止得到的,但它远没有任何动情的东西:

$(document).ready(function() {  

    //Default Action
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;       
    });

});


<div id="main" style="visibility: visible; display: inline-block;">

    <ul class="tabs">
        <li><a href="#tab1">XAL-2107-482336</a></li>
        <li><a href="#tab2">A-2017-00471</a></li>
    </ul>

    <div class="tab_container">

        <div class="tab_wrapper">

            <!--BEGIN DIV TAB 1 -->
            <div id="tab1"></div>
            <!--END DIV TAB 1 -->

            <!--BEGIN DIV TAB 2 -->
            <div id="tab2"></div>
            <!--END DIV TAB 2 -->

        </div><!-- END DIV tab_wrapper -->

    </div><!-- END DIV tab_container -->

</div><!-- END DIV main -->