이중 tab을 사용해서 움직이는 탭화면 만들기

<div class="tabWrap">
        <div class="tab1">
            <ul class="tabNav">
                <li><a href="#tab1-1" class="on">tab1-1</a></li>
                <li><a href="#tab1-2">tab1-2</a></li>
                <li><a href="#tab1-3">tab1-3</a></li>
                <li><a href="#tab1-4">tab1-4</a></li>
            </ul>
            <div class="content">
                <div id="tab1-1" class="tab on"><img src="img/tab01.png" alt="#"/></div>
                <div id="tab1-2" class="tab"><img src="img/tab02.png" alt="#"/></div>
                <div id="tab1-3" class="tab"><img src="img/tab03.jpg" alt="#"/></div>
                <div id="tab1-4" class="tab"><img src="img/tab04.jpg" alt="#"/></div>
            </div>
        </div>

        <div class="tab2">
            <ul class="tabNav">
                <li><a href="#tab2-1" class="on">tab2-1</a></li>
                <li><a href="#tab2-2">tab2-2</a></li>
                <li><a href="#tab2-3">tab2-3</a></li>
                <li><a href="#tab2-4">tab1-4</a></li>
            </ul>
            <div class="content">
                <div id="tab2-1" class="tab on"><img src="img/tab01.png" alt="#"/></div>
                <div id="tab2-2" class="tab"><img src="img/tab02.png" alt="#"/></div>
                <div id="tab2-3" class="tab"><img src="img/tab03.jpg" alt="#"/></div>
                <div id="tab2-4" class="tab"><img src="img/tab04.jpg" alt="#"/></div>
            </div>
        </div>
    </div>

.tab1{ display: flex; height:265px; float: left; border: 1px solid purple;}
.tabNav li a{width:220px; font-size:30px; display: block;}
.tabNav li a.on{background:#000; color:#fff;}
.content{width: 390px; height:100%; position: relative;}

.content div{position: absolute; display: none;}
.content div.on{display: block;}

$(function () {
    tab('.tab1')
    tab('.tab2')

    function tab(name) {

        $(name + ' .tabNav li a').click(function (e) {
            e.preventDefault()
            var idx = $(this).attr('href')

            $(name + ' .tabNav li a').removeClass('on')
            $(this).addClass('on')

            $(name + ' .tab').stop().fadeOut()
            $(idx).stop().fadeIn()
        })
    }
})