How to populate a table with array - JQUERY

How to populate a table with array - JQUERY

I'm doing a simple program that I save inside an array with the name "array" what is typed through an inputText after, click in "ADD", and after save into a database by PHP. When I show the array by the function "display_array, He shows normally in my P. 

  1.     function display_array()
    {
    //show in <p></p>
    $("#show").text('');
    $.each(array,function(index,value)
    {
      $('#show').append(value + '<br/>');
    });
    //show in table
    $("#showTable").text('');
    $.each(array,function(index,value)
    {
      $('#showTable').append(value + '<br/>');
    });
    }

When I order to show in table, All itens of the array are placed in only one single cell and a new row is created. 

Here is where I populate the table with new lines and assign an id for the table receive the text of the array by the function "display_array". When I create a new line, I either create a button supposed to erase the selected line, however he just eliminate the line of the screen and does not erase the selected line of the array. 

  1.     //adds line to table
    AddTableRow = function() {
      
        var newRow = $("<tr>");
        var cols = "";

        cols += '<td id="showTable"></td>';
        cols += '<td>';
        cols += '<button onclick="remove(this)" class="btn btn-large btn-danger" type="button">Remove</button>';
        cols += '</td>';

        newRow.append(cols);
        $("#products-table").append(newRow);
        return false;
        };
    });

this is my function to erase the table row, where has the line "array.remove(latest); where I've try to remove the last element of the array, but, it isn't what I need, I need to remove the item of the clicked line.

  1.     (function($) {
    //function to remove the last line of the table
              remove = function(item) {
                var tr = $(item).closest('tr');
                tr.fadeOut(400, function() {
                  tr.remove();  
                  //remove the last position of the array
                  array.remove(latest);
                });

                return false;
              }
            })(jQuery);

here is where I increment my array with what que user type in the input text.

  1.     //populate array
    var array = [];
    display_array();
    $('#btn').click(function()
    {
    var txt = $('#txt').val();
    array.push(txt);// appending value to arry 
    display_array();
    });
    //end array

and this is my HTML with input text, P and table, I'm using bootstrap.

  1.     <body>
    <div class="container">
    <div class="row">
    <div class="col-xs-12">
    <div class="form-group">
    <br>
    <input type="text" class="form-control" id="txt"/>
    <p id="show"></p>
    <button type="button" id="btn" onclick="AddTableRow(this)" class="btn btn-success" >add</button>
    </div>
    </div>
    </div>
    </div>
    <!-- begin table-->
        <div class="container">
         <div class="row">
    <div class="table-responsive">
      <table id="products-table" class="table table-hover table-bordered">
    <tbody>
    <tr>
      <th>Systems</th>
      <th class="actions">Actions</th>
    </tr>
    </tbody>
      </table>
    </div>
    </div>
        </div><!-- /.container -->
        <!-- end table-->




    </body></html>


My question is, how to populate an table correctly with array and how to remove the clicked line on table. Thanks since now !