title: Save and Display most recent User Input
body: <p><em><strong>The Goal:</strong></em> Make a &quot;Golf Scorecard&quot; for a buddies trip Where any golfer (or anyone with website access) can enter a score for a hole. (Aka: Golfer Alex name is already there, as he plays someone in the group enters his score on in the box under &quot;Hole 1&quot;. The scores will stay there for when the whole group gets home to the house and can pull up the website and see how each golfer did.</p>
  <p><em><strong>Basics:</strong></em> I'm self taught, basic understanding. I'm building this in a website using Visual Studio Code to write the code. Tried for a while to figure this out as I have the table so it can be edited, but clears on refresh or bringing up the site again. I understand that I need a php page, a javascript, and I'm thinking from what I've read, an AJAX? I don't need &quot;Edit&quot; buttons or anything, just simple as deleting what's there, and stores/displays new data entered. (Bonus: Having the &quot;out&quot; column be a sum of the entered scores)</p>
  <p>I have this for the Table (remember this is just super basic for now as i want to understand the bones before making it pretty): <a href="https://jsfiddle.net/k1d7Lyt0/4/" rel="nofollow noreferrer">jsFiddle of Code Below</a></p>
  <pre><code>  &lt;div class=&quot;card&quot;&gt;
    &lt;h3 class=&quot;card-header text-center font-weight-bold text-uppercase py-4&quot;&gt;Editable table&lt;/h3&gt;
    &lt;div class=&quot;card-body&quot;&gt;
      &lt;div id=&quot;table&quot; class=&quot;table-editable&quot;&gt;
        &lt;span class=&quot;table-add float-right mb-3 mr-2&quot;&gt;&lt;a href=&quot;#!&quot; class=&quot;text-success&quot;&gt;&lt;i
              class=&quot;fas fa-plus fa-2x&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/span&gt;
        &lt;table class=&quot;table table-bordered table-responsive-md table-striped text-center&quot;&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th class=&quot;text-center&quot;&gt;Player 1&lt;/th&gt;
              &lt;th class=&quot;text-center&quot;&gt;Hole 1&lt;/th&gt;
              &lt;th class=&quot;text-center&quot;&gt;Hole 2&lt;/th&gt;
              &lt;th class=&quot;text-center&quot;&gt;Hole 3&lt;/th&gt;
              &lt;th class=&quot;text-center&quot;&gt;Hole 4&lt;/th&gt;
              &lt;th class=&quot;text-center&quot;&gt;Hole 5&lt;/th&gt;
              &lt;th class=&quot;text-center&quot;&gt;Hole 6&lt;/th&gt;
              &lt;th class=&quot;text-center&quot;&gt;Hole 7&lt;/th&gt;
              &lt;th class=&quot;text-center&quot;&gt;Hole 8&lt;/th&gt;
              &lt;th class=&quot;text-center&quot;&gt;Hole 9&lt;/th&gt;
              &lt;th class=&quot;text-center&quot;&gt;Out&lt;/th&gt;
              
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr&gt;
              &lt;td class=&quot;pt-3-half&quot; contenteditable=&quot;Flase&quot;&gt;John Smith&lt;/td&gt;
              &lt;td class=&quot;pt-3-half text-center&quot; contenteditable=&quot;true&quot;&gt;-&lt;/td&gt;
              &lt;td class=&quot;pt-3-half text-center&quot; contenteditable=&quot;true&quot;&gt;-&lt;/td&gt;
              &lt;td class=&quot;pt-3-half text-center&quot; contenteditable=&quot;true&quot;&gt;-&lt;/td&gt;
              &lt;td class=&quot;pt-3-half text-center&quot; contenteditable=&quot;true&quot;&gt;-&lt;/td&gt;
              &lt;td class=&quot;pt-3-half text-center&quot; contenteditable=&quot;true&quot;&gt;-&lt;/td&gt;
              &lt;td class=&quot;pt-3-half text-center&quot; contenteditable=&quot;true&quot;&gt;-&lt;/td&gt;
              &lt;td class=&quot;pt-3-half text-center&quot; contenteditable=&quot;true&quot;&gt;-&lt;/td&gt;
              &lt;td class=&quot;pt-3-half text-center&quot; contenteditable=&quot;true&quot;&gt;-&lt;/td&gt;
              &lt;td class=&quot;pt-3-half text-center&quot; contenteditable=&quot;true&quot;&gt;-&lt;/td&gt;
              &lt;td class=&quot;pt-3-half text-center&quot; contenteditable=&quot;true&quot;&gt;-&lt;/td&gt;
            &lt;/tr&gt;
  </code></pre>
  <p>I Found this on here: <a href="https://stackoverflow.com/questions/25790268/how-to-save-and-retrieve-contenteditable-data">How to save and retrieve contenteditable data</a> but when copy and pasting it into my code to edit, I get lost.</p>