How can I dynamically add table rows [duplicate]

Question

I'm using foundation 5 framework (not sure if that matters). I will be passing all information to another page, so it's very important that each CELL is an individual distinguishable item/value when I do pass it, but I'm not sure on how to start on this problem. It should add another row every time add is hit. Same goes for Delete.

Can anyone guide me on how to approach this? Here is what my mark up looks:

<a href="#" class="button>Add line</a>
<a href="#" class="button>Delete line</a>

<div style="width:98%; margin:0 auto">
    <table align="center">
        <thead>
            <tr>
                <th>Status</th>
                <th>Campaign Name</th>
                <th>URL Link</th>
                <th>Product</th>
                <th>Dates (Start to End)</th>
                <th>Total Budget</th>
                <th>Daily Budget</th>
                <th>Pricing Model</th>
                <th>Bid</th>
                <th>Targeting Info</th>
                <th>Total Units</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>df</td>
                <td>dfd</td>
                <td>fdsd</td>
                <td>fdsfd</td>
                <td>dsf</td>
                <td>dd</td>
                <td>dd</td>
                <td>dd</td>
                <td>dd</td>
                <td>dd</td>
                <td>dd</td>
            </tr>
        </tbody>
    </table>
  </div>

Answer 1

HTML (assuming the thead doesn't change):

<a href="#" class="button" id="add">Add line</a>
<a href="#" class="button" id="delete">Delete line</a>

<div style="width:98%; margin:0 auto">
    <table align="center" id="table">
        <thead>
            <tr>
                <th id="0">Status</th>
                <th id="1">Campaign Name</th>
                <th id="2">URL Link</th>
                <th id="3">Product</th>
                <th id="4">Dates (Start to End)</th>
                <th id="5">Total Budget</th>
                <th id="6">Daily Budget</th>
                <th id="7">Pricing Model</th>
                <th id="8">Bid</th>
                <th id="9">Targeting Info</th>
                <th id="10">Total Units</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</div>

JavaScript:

<script type="text/javascript">
<!--
    var line_count = 0;
    //Count the amount of <th>'s we have
    var header_count = $('#table > thead').children('th').length - 1;

    $(document).ready(function() {
        $('#add').click(function() {
            //Create a new <tr> ('line')
            $('#table > tbody').append('<tr></tr>');

            //For every <th>, add a <td> ('cell')
            for(var i = 0; i < header_count; i++) {
                $('#table > tbody > tr:last-child').append('<td id="'+ line_count +'_'+ i +'"></td>');
            }

            line_count++; //Keep track of how many lines were added
        });

        //Now you still need a function for deleting.
        //You could add a button to every line which deletes its parent <tr>.
    });
-->
</script>