title: Adding new rows to table when moving between pages
body: <p>I'm trying to create a small html project where people can make reservations to a cinema by choosing a movie and seats and then, by clicking a PAY button a new page is shown summing their reservation ,and once a SAVE button is clicked, their reservation should by displayed as a new row in the reservations table.</p>
  
  <p>So I'm having difficulties adding new rows to the table page whenever the button (actually a link to the new page) is clicked in the previous page.</p>
  
  <p>Here's the table part of my orders page (nested inside a div body of course):</p>
  
  <pre><code>&lt;table style="border:1px solid black; width:1000px;" id="table"&gt;
       &lt;tr bgcolor=#262673 id="tr1" &gt;
            &lt;td align=center style="color:white; font-size:30px;"&gt;&lt;b&gt;Movie Name&lt;/b&gt;  &lt;/td&gt;  
            &lt;td align=center style="color:white; font-size:30px"&gt;&lt;b&gt;Number Of Seats&lt;/b&gt;  &lt;/td&gt;  
            &lt;td align=center style="color:white; font-size:30px"&gt;&lt;b&gt;Credit Card Type &lt;/b&gt;&lt;/td&gt;  
      &lt;/tr&gt; 
   &lt;/table&gt;
  </code></pre>
  
  <p>Here's the link from the previous page called "pay":</p>
  
  <pre><code>&lt;a href='myorders.html' onclick="Save();" id="link" &gt;&lt;img src='sobutton.png' height=40 align="right" &gt;&lt;/a&gt;
  </code></pre>
  
  <p>and here is my jquery.js file , linked to the orders page:</p>
  
  <pre><code>if (typeof (Storage) !== "undefined") {
  $(document).ready(function () {
  
      var prev = sessionStorage.getItem("toBeAppended"); // if nothing to append (if it's first time) then prev = null
      if (prev == null)
          prev = " "; // if prev == null, assign to it: " " (space) value
      var numOfSeats = JSON.parse(sessionStorage.getItem('checked')).length;
      var card = sessionStorage.getItem("CardName");
      var movie = sessionStorage.getItem("moviename");
      var new1 = "&lt;tr&gt;&lt;td&gt;" + movie + "&lt;/td&gt;&lt;td&gt;" + numOfSeats + "&lt;/td&gt;&lt;td&gt;" + card + "&lt;/td&gt;&lt;/tr&gt;";
      var oldPlusNew = prev+new1;
      $("#table").addClass("TABLE");
      $("#table").append(oldPlusNew);
      sessionStorage.setItem("toBeAppended", oldPlusNew);
  });
  }
  </code></pre>
  
  <p>please ignore the sessionstorage parts. The problem is whenever the "pay" page is loaded a row is added to the orders page, and when the orders page is loaded the same thing happens so when I click the button SAVE to move to the orders page from the pay page I see the same row twice, instead of only once..I don't know why this happens so if anyone is willing to help me I'd appreciate it.</p>
  
  <p>P.S the jQuery file is only linked to the orders page and not the pay page</p>
  
  <p>Also, people are given the opportunity to choose a credit card type from a checkbox and I can't seem to retrieve the value of the selected option.</p>