title: Accessing value of inputs within a div in each()
body: <p>I have a bit of code that allows a user to add a new phone to a list like so </p>
  
  <pre><code>const addPhone = async (phone) =&gt; {
    $('.phone-list').append(`
    &lt;div class='phone-div'&gt;
      &lt;table"&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td"&gt;
              &lt;p&gt;
                &lt;input class='type' type='text' value='${phone.type}'&gt;&lt;/input&gt;
              &lt;/p&gt;
              &lt;p&gt;
                &lt;input class='detail' type='text' value='${phone.detail}'&gt;&lt;/input&gt;
              &lt;/p&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;);
  };
  </code></pre>
  
  <p>Each time a user adds a new phone a new phone-div is added tothe list and turns up on screen.</p>
  
  <p>Now when the user taps a submit button I want to read the data from each phone-div create an object with and push that obj into an array that I can then send as JSON to my API to process... currently I am trying to use this</p>
  
  <pre><code>$(document)
    .on('click', '#submit', async () =&gt; {
      const phoneArray = [];
      $('.phone-div').each((i) =&gt; {
        console.log($(this).find('.type'));// returns undefined
        console.log($(this).find('.detail'));// returns undefined
      });
    });
  </code></pre>
  
  <p>How can I get this to put type and detail in an obj and then push it into an array that I can then send to the server like </p>
  
  <pre><code>phoneArray.push({
      type: $(this).find('.type').val(),
      detail: $(this).find('.detail').val(),
  })
  </code></pre>