Cacher is the code snippet organizer for pro developers

var variationTabIndex = 0;
var variationTabCount = 0;

$(".nav-tabs").on("click", "a", function (e) {
    e.preventDefault();
    if (!$(this).hasClass('add-variation')) {
        $(this).tab('show');
    }
})

$('.add-variation').click(function (e) {
    e.preventDefault();
    if (variationTabCount >= 20) {
        return;
    }
    var id = variationTabIndex + 1;
    var tabId = 'variation_' + id;
    var navTabId = 'variationNavTab_' + id;
    $(this).closest('li').before('<li id="' + navTabId + '"><a href="#variation_' + id + '">' + id + '</a></li>');
    var variationRemoval = id === 1 ? '' : '<a href="#" onclick="removeVariation(' + id + ');">このバリエーションを削除する</a><br/>'
    $('.tab-content').append('' +
            '<div class="tab-pane" id="' + tabId + '">\n' +
        '    <div class="box-body">\n' +
        '        <div class="form-group clearfix">\n' +
        '            <label>画像をアップロード</label>\n' +
        '            <ul class="unsortable"><li class="item-icon"><span>ここにファイルをドラッグ</span></li></ul>\n' +
        '        </div>\n' +
        '        <div class="form-group clearfix">\n' +
        '            <label>ドラッグ&ドロップで画像の並べ替え</label>\n' +
        '            <ul class="sortable">\n' +
        '                <li class="ui-state-default"><img src="" width="100px" id="1">\n' +
        '                    <span class="icon_cancel_button"><i class="fa fa-fw fa-close"></i></span></li>\n' +
        '                <li class="ui-state-default"><img src="" width="100px" id="2">\n' +
        '                    <span class="icon_cancel_button"><i class="fa fa-fw fa-close"></i></span></li>\n' +
        '            </ul>\n' +
        '        </div>\n' +
        '        <div class="form-group">\n' +
        '            <label>バリエーション管理番号</label>\n' +
        '            <input type="number" name="variationProductId" class="form-control" value="">\n' +
        '        </div>\n' +
        '        <div class="form-group">\n' +
        '            <label>バリエーション名</label>\n' +
        '            <input type="text" name="name" class="form-control" value="">\n' +
        '        </div>\n' +
        '        <div class="form-group">\n' +
        '            <label>在庫</label>\n' +
        '            <input type="number" name="stock" class="form-control" value="">\n' +
        '        </div>\n' +
        '        ' + variationRemoval + '\n' +
        '        ※バリエーションの並び替えは<strong>商品編集</strong>にて登録した後から行えます<br/>\n' +
        '        ※タブの数字は操作上のもので登録されません<br/>\n' +
        '    </div>' +
        '</div>');

    $('.nav-tabs li:nth-child(' + id + ') a').click();

    variationTabIndex++;
    variationTabCount++;

})

function removeVariation(id) {
    if (id === 1) {
        alert("1番目のバリエーションは削除できません");
        return;
    }
    if (!confirm("このバリエーションを削除してよろしいですか？")) {
        return;
    }
    var tabId = 'variation_' + id;
    var navTabId = 'variationNavTab_' + id;
    $('#' + tabId).remove();
    $('#' + navTabId).remove();
    variationTabCount--;

    $('.nav-tabs li:nth-child(1) a').click();
}