How can I prevent my unhidden HtmlTableRows from hiding again after the page is submitted?

Question

I'm using an HtmlButton to make some HtmlTableRows that have been hidden visible. The HtmlButton is created and set up like so:

HtmlButton btnAddFoapalRow = null;
. . .
btnAddFoapalRow = new HtmlButton();
btnAddFoapalRow.Attributes["type"] = "button";
btnAddFoapalRow.InnerHtml = "+"; 
btnAddFoapalRow.ID = "btnAddFoapalRow";
this.Controls.Add(btnAddFoapalRow);

I then create HtmlTableCells programmatically, add those cells to dynamically created HtmlTableRows, and then add the HtmlTableRows to an HtmlTable.

Rows 3 and 4 start off life hidden under a bushel (so to speak):

foapalrow3.Style["display"] = "none";
. . .
foapalrow4.Style["display"] = "none";

The above happens server-side/C#; I respond to btnAddFoapalRow's click in jQuery to make the next hidden row, as long as there is one, unhidden/visible:

/* This makes the next hidden row visible, as long as there is one */
$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
    $('[id$=foapalhtmltable]').find('tr:hidden:first').show();
});

This works slicker than Grace. The problem is that when I submit the form, the HtmlTable reverts back to only showing its initial two rows (header row and one data row); the one or two additional data rows I've added by clicking btnAddFoapalRow "go invisible" again (revert to "display:none" apparently). If I re-click btnAddFoapalRow, the rows reappear with any entered data still intact -- so they haven't really been 86'd, they're just being shy -- but how can I prevent these rows from folding up/hiding at all?

Answer 1

Going with what @TrueBlueAussie said in the comments, you need to have the fact that the form has been submitted persist through a page load.

You can either handle that somehow on the server side (DB Update perhaps) or to make it simpler you could just create a cookie with JavaScript.