title: Form that PUT and POST and DELETE together
body: <p>I have a form with input fields filled with data from backend, a header section (always one header), and a rows section (can be more than one row). It looks like this:</p>
  
  <pre><code>&lt;form&gt;
  &lt;header id="header"&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="name"&gt;Name&lt;/label&gt;
          &lt;input type="text" class="form-control" id="name"value="jhon"&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="name"&gt;Age&lt;/label&gt;
          &lt;input type="text" class="form-control" id="name" value="smith"&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  &lt;details id="row" &gt;
      &lt;article id="article-1"&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="article-name"&gt;Article Name&lt;/label&gt;
              &lt;input type="text" class="form-control" id="article-name" value="article 1"&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="article-price"&gt;Article Price&lt;/label&gt;
              &lt;input type="text" class="form-control" id="article-price" value="100"&gt;
          &lt;/div&gt;
          &lt;button id="delete-article-1"&gt;-&lt;/button&gt;
      &lt;/article&gt;
      &lt;article id="article-2"&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="article-name"&gt;Article Name&lt;/label&gt;
              &lt;input type="text" class="form-control" id="article-name" value="article 2"&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="article-price"&gt;Article Price&lt;/label&gt;
              &lt;input type="text" class="form-control" id="article-price" value="200"&gt;
          &lt;/div&gt;
          &lt;button id="delete-article-2"&gt;-&lt;/button&gt;
      &lt;/article&gt;
  &lt;/details&gt;
  &lt;footer&gt;
      &lt;button id="add-article-row"&gt;+&lt;/button&gt;
      &lt;button id="submitButton" type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
  &lt;/footer&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>on submit button click I want to perform a PUT request for the header section (or no request if there's not changes) and different action based on rows:</p>
  
  <p><strong>CASE 1</strong>: the rows ids are the same of the initial rows ids</p>
  
  <ul>
  <li><p>no request if there's no change to the initial values</p>
  
  <p><strong>OR</strong></p></li>
  <li>a PUT request if the values changes (update based on article id) </li>
  </ul>
  
  <p><strong>CASE 2</strong>: new rows added</p>
  
  <ul>
  <li><p>no request for the rows that has no changes to the initial values <strong>AND</strong> a POST request for the new rows (add an article)</p>
  
  <p><strong>OR</strong></p></li>
  <li>a PUT request if the values changes (update based on article id) <strong>AND</strong> a POST request for the new rows (add an article)</li>
  </ul>
  
  <p><strong>CASE 3</strong>: one or more rows is deleted</p>
  
  <ul>
  <li><p>no request for the rows that has no changes to the initial values <strong>AND</strong> a DELETE request for the deleted rows (based on article id)</p>
  
  <p><strong>OR</strong></p></li>
  <li>a PUT request if the values changes (update based on article id) <strong>AND</strong> a DELETE request for the deleted rows (based on article id)</li>
  </ul>
  
  <p><strong>CASE 4</strong>: new rows added <strong>AND</strong> one or more rows deleted</p>
  
  <ul>
  <li><p>no request for the rows that has no changes to the initial values <strong>AND</strong> a DELETE request for the deleted rows (based on article id) <strong>AND</strong> a POST request for the new rows (add an article)</p>
  
  <p><strong>OR</strong></p></li>
  <li>a PUT request if the values changes (update based on article id) <strong>AND</strong> a DELETE request for the deleted rows (based on article id) <strong>AND</strong> a POST request for the new rows (add an article)</li>
  </ul>
  
  <p>The question is: How can I build a Form that can handle all of these actions together? Based on row-id I can loop every time the button is clicked and check the changed values, the new ones and the deleted ones, then send requests based on the correct use case, but I don't know if this is the correct way to setup this kind of form</p>
  
  <p>PS: I'm using Laravel from backend and jQuery for AJAX requests</p>
  
  <p>Thank you for the help</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I create a sample jQuery file to simulate the form, getting the old data and the sending the new ones, here a JSFiddle: <a href="https://codepen.io/ufollettu/pen/LaLKpe?editors=1111" rel="nofollow noreferrer">https://codepen.io/ufollettu/pen/LaLKpe?editors=1111</a></p>
  
  <p>Is better to send a unique POST request to my BE controller, then manage the PUT/POST/DELETE logic in Laravel, or send multiple AJAX requests (one for header and one for each rows)?</p>
  
  <p>NB: I need to rollback the data to the old one if a single request fail too</p>