title: Pass info to db with ajax
body: <p>I am trying to pass the information from my HTML list to a database via Ajax jQuery. I'm unsure if my approach will work and how I should proceed. My biggest issue is how to get the correct information from the list so I can pass them to the PHP page and insert them. What I'm getting from my <code>get_data</code> function is something like this:</p>
  <blockquote>
  <p>James blue Looks Good</p>
  <p>Rebecka black Looks very bad</p>
  </blockquote>
  <p>What I will be trying to do is insert this info to my database in the colors.php file. My table looks like this:</p>
  <pre>
  person
  color_name
  opinion
  </pre>
  <p>So it should for example look like this:</p>
  <pre><code>person = James
  color_name = blue
  opinion = Looks good
  </code></pre>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;div&gt;
    &lt;ul data-person=&quot;James&quot;&gt;
      &lt;li data-color_opinion=&quot;blue&quot;&gt;Looks good&lt;/li&gt;
      &lt;li data-color_opinion=&quot;green&quot;&gt;Looks ok&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul data-person=&quot;Rebecka&quot;&gt;
      &lt;li data-color_opinion=&quot;blue&quot;&gt;Looks bad&lt;/li&gt;
      &lt;li data-color_opinion=&quot;black&quot;&gt;Looks very bad&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>JQuery Ajax</strong></p>
  <pre><code>function get_data() {
    $.each($('ul'), function(i, el) {
      $.each($(el).find(&quot;[data-color_opinion]&quot;), function(j, child) {
        let person = $(el).data('person');
        let color_name = $(child).data('color_opinion');
        let opinion = $(child).text();
      });
    });
  };
  
  $.ajax({
    type: &quot;POST&quot;,
    dataType: &quot;json&quot;,
    url: 'colors.php',
    data: get_data(),
    success: function(data) {
      //data is what your PHP page send you back,
      //what do you want to do with it?
      console.log(data);
    }
  });
  </code></pre>