title: Creating an editable HTML table from 2D array
body: <p>So I am trying to make a flashcards website, where users can add, edit, and delete flashcards. There are two cards - front and back. The user can already add words, but cannot edit or delete them. For the purposes of this question I will use an example array:</p>
  
  <pre><code>var flashcards = [["Uomo", "Man"],["Donna", "Woman"],["Ragazzo", "Boy"]]
  </code></pre>
  
  <p>But I would like a more user-friendly way to edit the flashcards, preferably using a table like this:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;th&gt;Front&lt;/th&gt;
      &lt;th&gt;Back&lt;/th&gt; 
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="text" name="flashcard" value="Uomo"&gt; &lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="flashcard" value="Man"&gt;&lt;/td&gt;
    &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt;&lt;input type="text" name="flashcard" value="Donna"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="flashcard" value="Woman"&gt;&lt;/td&gt;
    &lt;/tr&gt;
        &lt;tr&gt;
      &lt;td&gt;&lt;input type="text" name="flashcard" value="Ragazzo"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="flashcard" value="Boy"&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;button type="button"&gt;Add more&lt;/button&gt;
  &lt;br&gt;
  &lt;button type="button"&gt;Save changes&lt;/button&gt;
  </code></pre>
  
  <p>So they can update their flashcards editing the input fields, or clicking "add more" and it creating a new row. Clicking "save changes" updates the array to the content of the table. </p>
  
  <p>I don't mind it not being a HTML table per se, but something that is easy to edit for the user.</p>
  
  <p>I just cannot figure out the best way to approach this. Any advice?</p>