jQuery附加把手

I'm using handlebars to render info I got from my local server using ajax. My HTML looks like:

    <ul class="nav nav-tabs" id="tabsId">
        <script id="tabs-template" type="text/x-handlebars-template">
            {{#each Tabs}}
                <li data-tab-content={{Id}}><a href="#">{{Name}}</a></li>
            {{/each}}
        </script>
    </ul>
    <div id="tabsContentId">
    <script id="tabs-content-template" type="text/x-handlebars-template">
        {{#each Tabs}}
            <div class="tab-content" data-tab-content="{{Id}}">{{Content}}</div>
        {{/each}}
    </script>
    </div>

I also have a simple form with id, name and content inputs and sumbit button. It looks like:

<input type="text" class="form-control" name="inputIndex" id="inputIndex" placeholder="Index">
<input type="text" class="form-control" name="inputTitle" id="inputTitle" placeholder="Title">
<textarea class="form-control" rows="5" name="textareaContent" id="textareaContent" placeholder="Content"></textarea>
<button type="submit" class="btn btn-success" id="buttonSumbit">Add</button>

How can I add a new tab to my html document using jQuery? I've tried to write a stub function like:

$("#buttonSumbit").click(function(){
    var id = '10';
    var name = '10';
    $("<li data-tab-content='" + id + "'><a href=\"#\">" + name + "</a></li>").appendTo("tabsId");
});

But nothing happening when I'm clicking sumbit button.