Удаление нескольких строк таблицы с помощью JQuery и ajax

Я хочу иметь возможность удалять строки, отмеченные флажком, но когда я нажимаю «Удалить выбранное», как таблица на веб-странице, так и база данных MySQL остаются неизменными. Как мне удалить выбранные строки как с веб-страницы, так и с базы данных?

Обновлено: теперь я могу удалить строки, но только первую строку, несмотря на то, что я установил более одного флажка или установил другой флажок не в первой строке. Кроме того, если я хочу удалить еще одну запись, мне придется сначала обновить страницу, прежде чем удалять другую.

datatable.php

<div class = "row well">
    <a type = "button" class = "delete_all btn btn-primary pull-right">Delete Selected</a>
</div>

<script type = "text/javascript">

$(document).ready(function($)
{

function create_html_table (tbl_data) {

tbl +='<table>';
tbl +='<thead>';
tbl +='<tr>';

tbl +='<th rowspan = "3"><input type = "checkbox" id = "master"></th>';
// More table headers
tbl +='</tr>';
tbl +='</thead>';

tbl +='<tbody>';

          $.each(tbl_data, function(index, val) 
            {   
                var row_id = val['row_id'];

                //loop through ajax row data
                tbl +='<tr id = "row" row_id = "'+row_id+'">';

                    tbl +='<td><input type = "checkbox" class = "sub_chk"></td>';
                    tbl +='<td>'+(index + 1)+'</td>';
                    tbl +='<td><div col_name = "filename">'+val['filename']+'</div></td>';
                    // More data
                tbl +='</tr>';
             });

tbl +='</tbody>';
tbl +='</table>';
}

var ajax_url = "<?php echo APPURL;?>/ajax.php" ;

// Multi-select
$(document).on("click","#master", function(e) {

if ($(this).is(':checked',true))  
{
    $(".sub_chk").prop('checked', true);  
}  
else  
{  
    $(".sub_chk").prop('checked',false);  
}  
});

//Delete selected rows
$(document).on('click', '.delete_all', function(event) 
{
    event.preventDefault();

    var ele_this = $('#row') ;
    var row_id = ele_this.attr('row_id');

    var allVals = [];
    $(".sub_chk:checked").each(function()
    {    
    allVals.push(row_id);
    });

    if (allVals.length <=0)  
    {  
        alert("Please select row.");  
    }

    else {

    var data_obj=
    {
        call_type:'delete_row_entry',
        row_id:row_id,
    };  

    ele_this.html('<p class = "bg-warning">Please wait....deleting your entry</p>')

    $.post(ajax_url, data_obj, function(data) 
    { 
        var d1 = JSON.parse(data); 
        if (d1.status == "error")
        {
            var msg = ''
            + '<h3>There was an error while trying to add your entry</h3>'
            +'<pre class = "bg-danger">'+JSON.stringify(data_obj, null, 2) +'</pre>'
            +'';


        }
        else if (d1.status == "success")
        {
            ele_this.closest('tr').css('background','red').slideUp('slow');              
        }
    });

    }   

});

});

</script>

ajax.php

//--->Delete row entry  > start
if (isset($_POST['call_type']) && $_POST['call_type'] = = "delete_row_entry")

{   

$row_id = app_db()->CleanDBData($_POST['row_id']);   

$q1 = app_db()->select("select * from data where row_id='$row_id'");
if ($q1 > 0) 
{
    //found a row to be deleted
    $strTableName = "data";

    $array_where = array('row_id' => $row_id);

    //Call it like this:
    app_db()->Delete($strTableName,$array_where);

    echo json_encode(array(
        'status' => 'success', 
        'msg' => 'deleted entry', 
    ));
    die();
}    
}
//--->Delete row entry  > end

Я видел другие подобные вопросы SO, такие как Вот этот, но я не думаю, что это применимо к моему коду.

Мой вывод: