Computer Science Geek Zone: How to implement visibility on Javascript with incremental + option (or visibility)

I want an incremental + option in my script eg. one by one expansion.

Suppose after click on Optiontional Configurations + than Network Config will be expand with another + option, now if I want another input than I will click on + and Neighbor Config will be expand.

index.php :

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
    $(function() {
    var siblingCounter = 0;
    $('.sub-view').hide();
    $('.main-view').on('click', function() {
    var localCounter = $(this).hasClass('default') ? siblingCounter++ : 0;
    $(this).siblings('.sub-view').eq(localCounter).toggle();
    });
    });
</script>

</head>
<link href="style.css" rel="stylesheet" type="text/css" />
<body>
<br/>
<input type="button" value="+" class="main-view default">Optional Configurations
<div class="sub-view">
    <table>
        <br/>
        <tr>
            <td>
                <input type="button" value="+" class="main-view">Network Config
                <div id="network" class="sub-view">
                    <table>
                        <tr>
                            <td class="style11" valign=top style="height: 4px">Network</td>
                            <td class="style9" style="height: 4px">
                                <input type="text" value="dummy value" name="network" size="2" style="width: 147px">
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</div>

<div class="sub-view">
    <table>
        <tr>
            <td>
                <br/>
                <input type="button" value="+" class="main-view">Neighbor Config
                <div id="neighbor" class="sub-view">
                    <table>
                        <tr>
                            <td class="style11" valign=top style="height: 4px">Neighbor IP</td>
                            <td class="style9" style="height: 4px">
                                <input type="text" value="dummy value" name="neighbor" size="2" style="width: 147px">
                            </td>
                        </tr>
                    </table>
                </div>

            </td>
        </tr>
    </table>
</div>
</body>
</html>

style.css :

.style1 {
    font-family: Calibri;
}

.style4 {
    font-family: Calibri;
    font-weight: bold;
}

.style5 {
    text-align: right;
}

.style6 {
    border: 1px solid #000000;
    margin-right: 0px;
}

.newStyle1 {
    border-style: groove;
    border-width: thin;
}

.style8 {
    background-color: #C0C0C0;
}

.style9 {
    font-family: Calibri;
    font-family: Calibri;
    background-color: #C0C0C0;
}

.style11 {
    font-family: Calibri;
    font-weight: bold;
    background-color: #C0C0C0;
}

.style12 {
    color: #FFFFFF;
}

.style13 {
    font-weight: bold;
    background-color: #007ABB;
    color: #C0C0C0;
}

.style15 {
    color: #C0C0C0;
}

.style16 {
    text-align: left;
}

.style17 {
    font-family: Calibri;
    text-align: right;
}