I added rows to a html table with jquery, but when I refresh the browser, the rows disappear. How can I get the rows to stay?

<TABLE id="dataTable" width="100%" align="center">
    <TR align="center" border="1">
        <TH></TH>
        <TH>ID </TH>
        <TH>Name</TH>
        <TH>Status</TH>
    </TR>
    <TR align="center">
        <TD><INPUT type="checkbox" name="chk"/></TD>
        <TD> 1 </TD>
        <TD> <INPUT type="text" value="Submission 1" /> </TD>
        <TD>Working version</TD>
    </TR>
</TABLE>

<script type="text/javascript">

$(document).ready(function(){
$('#createNew').click(function() {
    var table = document.getElementById('dataTable');

    var rowCount = table.rows.length;

    $('#dataTable tr:last').after('<TR align="center"><TD><INPUT type="checkbox" name="chk"/></TD><TD>'+ rowCount + '</TD><TD> <INPUT type="text" value="Submission 1" />   </TD><TD>Working version</TD></TR>');