title: How can i save JavaScript outputs and show them at the same time?
body: <p>So i wanted to make a beginner app for myself that calculates my pay at work. I get paid every two weeks and also for km. My question is every time I click &quot;Add&quot; button it should output my inputs then clear itself and when i do another it should show it under and so on. Also i would like to save it in local storage to calculate final pay end of every 2 weeks. Any suggestions are appreciated and im a beginner so please go easy on me.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function myFunction() {
    //week dropdown
    var e = document.getElementById("week");
    var strUser = e.options[e.selectedIndex].text;
    document.getElementById("wek").innerHTML = strUser;
    //day dropdown
    var d = document.getElementById("day");
    var days = d.options[d.selectedIndex].text;
    document.getElementById("mf").innerHTML = days;
    //start
    var s = document.getElementById("start").value;
    document.getElementById("strt").innerHTML = s;
    //End
    var a = document.getElementById("end").value;
    document.getElementById("ed").innerHTML = a;
    //Hrs
    var h = document.getElementById("hrs").value;
    document.getElementById("hrss").innerHTML = h;
    //KM
    var k = document.getElementById("km").value;
    document.getElementById("kmm").innerHTML = k;
    //KM pay
    var kmpay = k * 0.5;
    document.getElementById("kmpays").innerHTML = kmpay;
    //Hr pay
    var hrpay = h * 18;
    document.getElementById("hrpays").innerHTML = hrpay;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;h2&gt;Time Tracker&lt;/h2&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;th&gt;Week&lt;/th&gt;
        &lt;th&gt;Day&lt;/th&gt;
        &lt;th&gt;Start&lt;/th&gt;
        &lt;th&gt;End&lt;/th&gt;
        &lt;th&gt;Hrs&lt;/th&gt;
        &lt;th&gt;KM&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;select id="week"&gt;
            &lt;option&gt;1&lt;/option&gt;
            &lt;option&gt;2&lt;/option&gt;
          &lt;/select&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;select id="day"&gt;
            &lt;option&gt;Monday&lt;/option&gt;
            &lt;option&gt;Tuesday&lt;/option&gt;
            &lt;option&gt;Wednsday&lt;/option&gt;
            &lt;option&gt;Thursday&lt;/option&gt;
            &lt;option&gt;Friday&lt;/option&gt;
          &lt;/select&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;input type="number" id="start" style="max-width: 45px;"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="number" id="end" style="max-width: 45px;"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="number" id="hrs" style="max-width: 45px;"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="number" id="km" style="max-width: 45px;"&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
    &lt;button id="btn" onclick="myFunction()"&gt;Add&lt;/button&gt;
    &lt;h3&gt;&lt;/h3&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;th&gt;Week&lt;/th&gt;
        &lt;th&gt;Day&lt;/th&gt;
        &lt;th&gt;Start&lt;/th&gt;
        &lt;th&gt;End&lt;/th&gt;
        &lt;th&gt;Hrs&lt;/th&gt;
        &lt;th&gt;KM&lt;/th&gt;
        &lt;th&gt;HrPay&lt;/th&gt;
        &lt;th&gt;KMpay&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td id="wek"&gt;..&lt;/td&gt;
        &lt;td id="mf"&gt;..&lt;/td&gt;
        &lt;td id="strt"&gt;..&lt;/td&gt;
        &lt;td id="ed"&gt;..&lt;/td&gt;
        &lt;td id="hrss"&gt;..&lt;/td&gt;
        &lt;td id="kmm"&gt;..&lt;/td&gt;
        &lt;td id="hrpays"&gt;$&lt;/td&gt;
        &lt;td id="kmpays"&gt;$&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>