Js + Java EE(Ajax добавление данных в таблицу)

Здравствуйте, есть приложение, в котором находится комната администратора. Там есть таблица в которой находятся группы студентов, и есть кнопочка для добавления новой группы. Хотелось бы сделать так, чтобы при добавлении, либо удалении группы табличка перерисовывалась без перезагрузки страницы, пока получилось только сделать, чтобы данные добавлялись в конец таблицы, т.е. после удаления либо добавления происходит дублирование данных в таблице. Вот сам код:

GroupsServlet.java

...
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    req.setCharacterEncoding("UTF-8");
    resp.setCharacterEncoding("UTF-8");
    resp.setContentType("application/json");
    List<Group> groups;
    //If clicked button of the addition group
    if(req.getParameter("title_group") != null){
        addGroup(req, resp);
        groups = groupMaker.getGroups();
        String json = new Gson().toJson(groups);
        resp.getWriter().write(json);
    }
    //If clicked button of the updating group
    if(req.getParameter("btn_change_group") != null){
        ...
    }
    //If clicked button of the deleting group
    if(req.getParameter("btn_del_group") != null){
        ...
    }
}
...
private void addGroup(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    String nameGroup = req.getParameter("title_group");
    groupMaker.addGroup(nameGroup);
}
...

admin_room.jsp

...
<div class="col-lg-12 col-md-12">
    <table id="table_of_groups" class="table table-bordered">
        <thead>
             <tr>
                 <th>Группа</th>
                 <th>Количество пользователей в группе</th>
                 <th>Средний результат</th>
             </tr>
        </thead>
        <tbody>
        <c:forEach items="${groups}" var="group">
             <tr>
                 <td>${group.name}</td>
                 <td>${group.countUsers}</td>
                 <td>${group.midResult}</td>
             </tr>
        </c:forEach>
        </tbody>
    </table>
</div>
...

groups.js

var formAddGroup = $("form[name='add_group']");
var formChangeGroup = $("form[name='change_group']");
var formDelGroup = $("form[name='del_group']");
var logger = $(".log_admin");
...
formAddGroup.submit(function(){
    var titleGroup = $("input[name='title_group']");
    if(titleGroup.val() == ""){
        logger.html(decorateError("Введите название группы."));
        return false;
    }
    $.post(formAddGroup.attr("action"), formAddGroup.serialize(), function(responseJson){
        var tableGroups = $("#table_of_groups");
        $.each(responseJson, function(index, group) {
           $("<tr>").appendTo(tableGroups)
               .append($("<td>").text(group.name))
               .append($("<td>").text("0"))
               .append($("<td>").text("0"));
        });
    });
    event.preventDefault();
});

Очень надеюсь на чью-то помощь...