如何使用选择和取消选择按钮在Javascript中添加和删除动态数组中的元素？

    <div id="tables-box" class="module-box">
     <form method="POST" action="<?php echo current_url(); ?>">
         <?php echo lang('header');?>
        <div class="btn-group-la" role="group" aria-label="First group" >       
        <?php 
        foreach ($tables as $table)
        {
            //table status
            //0- busy (red)
            //1- available (empty)
            //2- waiting for check (light blue)
            //3- done (blue)
            //4- prepare (yellow)

            $status = lang('status_available');
            switch ($table['table_status']) {
                case 0:
                    $btn_class = "btn btn-danger btn-spacing";
                    $btn_extra = "disabled";
                    $status = lang('status_busy');
                    break;
                case 1:
                    $btn_class = "btn btn-success btn-spacing";
                    $btn_extra = "data-toggle='button' aria-pressed='false'";
                    $status = lang('status_available');
                    break;
                case 2:
                    $btn_class = "btn btn-info btn-spacing";
                    $btn_extra = "disabled";
                    $status = lang('status_check');
                    break;
                case 3:
                    $btn_class = "btn btn-primary btn-spacing";
                    $btn_extra = "disabled";
                    $status = lang('status_done');
                    break;
                case 4:
                    $btn_class = "btn btn-warning btn-spacing";
                    $btn_extra = "disabled";
                    $status = lang('status_prepare');
                    break;
            }       
        $btn = 'id="table_'.$table['table_id'].'" type="button" class="'.$btn_class.'" '.$btn_extra;
        echo "<button ", $btn, ">";
        echo $table['table_name'], "<br/>";
        echo lang('persons'), " ", $table['max_capacity'], "<br/>";
        echo $status, "<br/>";
        echo "</button>";
        }
        ?>
          </div>      

            <span id="selected"><?php echo lang('select_table');?></span>
            <input type="hidden" name="table_id" id="table_id" value="-1" />
            <input type="hidden" name="location_id" value="<?php echo $location_id;?>" />
            <input type="hidden" name="order_type" value="<?php echo $order_type;?>" />   
          <div>         
            <input type="submit" id="btnSubmit" class="btn btn-primary" value="<?php echo lang('button_save');?>" disabled />
          </div>
      </form>
</div>

Script

<script type="text/javascript"><!--
    $(document).ready(function() {              
        <?php  foreach ($tables as $table){?>
        $("#table_<?php echo $table['table_id'];?>").click(function(){
            $('#selected').text('<?php echo lang('selected_table')." (".$table['table_name'].")";?>');
            $('#table_id').val('<?php echo $table['table_id'];?>');
            $('#btnSubmit').removeAttr('disabled');
            //alert($('#table_id').val());
        }); 
        <?php }?>
    });
--></script>

I have a group of buttons and every button with an ID, I want to select and deselect buttons. when I select a button it's ID will be added to an array and when I deselect a button its ID will be removed from the same array, Then I will post this array by a submit button.

I would have create two classes. On click switch classes and add or remove from array using javascript depending on which class button has.