title: Get data from dynamically added elements and pass to Django request.POST
body: <p>I have a restaurant_form which allows user to input menu items. Each menu item represent a table row which is added dynamically. Each table row has input for: menu item, price, halal(Boolean), and notes.</p>
  
  <p>Here is a sample entry. data-ids and names of input elements are incremented.</p>
  
  <pre><code>&lt;tbody class="menu-entry "&gt;
      &lt;tr id='menu0' data-id="0" class="hidden"&gt;
          &lt;td data-name="name" class="name"&gt;
              &lt;input type="text" name='name0'  placeholder='Menu Item' class="form-control"/&gt;
          &lt;/td&gt;
          &lt;td data-name="price"&gt;
              &lt;input type="text" name='price0' placeholder='0.00' class="form-control"/&gt;
          &lt;/td&gt;
          &lt;td data-name="halal"&gt;
              &lt;input type="checkbox" name="veg0" value="halal" class="form-control"&gt;
          &lt;/td&gt;
          &lt;td data-name="notes"&gt;
              &lt;textarea name="notes0" placeholder="Contains soy." class="form-control"&gt;&lt;/textarea&gt;
          &lt;/td&gt;
          &lt;td data-name="del"&gt;
              &lt;button name="del0" class='btn btn-danger glyphicon glyphicon-remove row-remove'&gt;&lt;/button&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>What is the best way to retrieve data from the table? I have tried this:
        </p>
  
  <pre><code>  $('#restaurant_form').submit(function () {
          $('.menu-entry').each(function()
          {
              $(this).find('td').each(function(){
                  $(this).find("input").each(function() {
                      alert(this.value)
                  });
  
                  $(this).find("textarea").each(function() {
                      alert(this.value)
                  });
              })
          })
    })
  </code></pre>
  
  <p></p>
  
  <p>The alert() shows the correct values however I am wondering if there is a better way to do this?</p>
  
  <p><strong>Edit</strong> I simplified it using: </p>
  
  <pre><code>$('.menu-entry .form-control').each()
  </code></pre>
  
  <p>Also, after retrieving the values, how can I pass it to the view with a POST request? I would like to save the values to model 
  RestaurantMenu with columns name, price, halal and notes.</p>
  
  <p>Thank you.</p>