ajax execute by form id doesn't works if create html5 tags inside form

I have a datatable and form. Both are wrapped by html5 section tag. The table rendered correctly for edit, delete and cancel edit options, but doesn't work with save (save edits) and add new record(f:ajax execute).

I'm so new in JSF, so i can't understand very well how works ajax here.

I'm using JSF 2.2 (Mojarra) and GlassFish 4.1

Facelet:

<h:form id="toDoForm">
    <!--  todo table -->
    <section class="todo-table">
        <h:dataTable id="toDoTable" value="#{toDoBean.toDoList}" var="toDo" styleClass="table">
            <h:column>
                <f:facet name="header"><h:outputText value="ToDo name"/></f:facet>
                <h:inputText value="#{toDo.name}" rendered="#{toDo.editable}"/>
                <h:outputText value="#{toDo.name}" rendered="#{not toDo.editable}"/>
            </h:column>
            <!-- action command links -->
            <h:column>
                <f:facet name="header"><h:outputText value="Actions"/></f:facet>
                <h:commandLink value="Edit" action="#{toDoBean.edit(toDo)}" rendered="#{not toDo.editable}">
                    <f:ajax render="toDoForm:toDoTable"/>
                </h:commandLink>
                <h:commandLink value="Save" action="#{toDoBean.save(toDo)}" rendered="#{toDo.editable}">
                    <f:ajax execute="toDoForm" render="toDoForm:toDoTable"/>
                </h:commandLink>
                <h:commandLink value="Cancel" action="#{toDoBean.cancelEdit(toDo)}" rendered="#{toDo.editable}">
                    <f:ajax render="toDoForm:toDoTable"/>
                </h:commandLink>
                <h:commandLink value="Delete" action="#{toDoBean.delete(toDo)}" rendered="#{not toDo.editable}">
                    <f:ajax render="toDoForm:toDoTable"/>
                </h:commandLink>
            </h:column>
    </h:dataTable>
    </section>
    <!-- new toDo -->
    <section class="new-todo">
        <section class="frm-group">
            <h:outputLabel for="todo-name" value="ToDo name"/>
            <h:inputText id="todo-name" p:placeholder="Some task here..." value="#{toDoBean.toDo.name}"/>
        </section>
        <section class="frm-group">
            <h:outputLabel for="todo-date" value="Limit date"/>
            <h:inputText id="todo-date" p:placeholder="dd-MM-yyyy" value="#{toDoBean.toDo.expDate}"/>
        </section>
        <!-- just for add a fontawesome icon to button -->
        <button type="submit" jsf:action="toDoBean.add()">
            <i class="fa fa-check"></i>
            Add record
            <f:ajax execute="toDoForm" render="toDoForm:toDoTable"/>
        </button>
    </section>
</h:form>

Thanks.