title: Looping through DOM elements and children to create a JS Array - having trouble understanding the best way to accomplish this
body: <p>I appreciate any time you spend on this question of mine.</p>
  
  <p><strong>The Project</strong></p>
  
  <p>My mom is an art teacher that spends a lot of time creating paper-cutting guides for her projects. I am working on a tool for her that will allow her to quickly build and share guides through her website. Her site is built with wordpress, so I built the tool using jQuery and jQuery UI. Here is what it looks like in action:</p>
  
  <p><a href="https://i.stack.imgur.com/z3Y5C.gif" rel="nofollow noreferrer">https://i.stack.imgur.com/z3Y5C.gif</a></p>
  
  <p>The UI is working well enough to move onto saving the data, and that is where I am having trouble.</p>
  
  <p><strong>The Problem</strong></p>
  
  <p>I want to create an array based on the DOM elements created by jquery. The plan is to save the array to WordPress and then use it to rebuild the guide for viewing / editing.</p>
  
  <p>The basic DOM structure goes like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function saveGuide() {
    numberOfSheets = $(".sheet").length;
    console.log("number of sheets:", numberOfSheets);
    sheetCounter = 1;
    for (i = 0; i &lt; numberOfSheets; i++) {
      var saveSheets = $(".sheet")
        .map(function() {
          return {
            sheetName: $(this).attr("data-id"),
            width: ($(this).width() + 1) / 80,
            height: ($(this).height() + 1) / 80,
            // Map the pieces in the sheet
            pieces: (saveSheets = $(
                ".sheet[data-sheetnumber='" + sheetCounter + "'] .piece"
              )
              .map(function() {
                return {
                  pieceName: $(this).attr("data-name"),
                  pieceColor: $(this).attr("data-color"),
                  pieceWidth: ($(this).width() + 4) / 80,
                  pieceHeight: ($(this).height() + 4) / 80,
                  pieceXPOS: $(this).position().left / 80,
                  pieceYPOS: $(this).position().top / 80
                };
              })
              .get())
          };
        })
        .get();
      sheetCounter++;
    }
  
    myJSON = JSON.stringify(saveSheets);
    
    console.log(myJSON);
  }
  
  saveGuide();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="sheet"&gt;
    &lt;div class="piece"&gt;&lt;/div&gt;
    &lt;div class="piece"&gt;&lt;/div&gt;
    &lt;div class="line"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="sheet"&gt;
    &lt;div class="piece"&gt;&lt;/div&gt;
    &lt;div class="piece"&gt;&lt;/div&gt;
    &lt;div class="line"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So each sheet gets entered into the array just fine, but the pieces are always the same and from the last sheet. I'm guessing the variable overwrites itself with each loop... </p>
  
  <p>Here is a link to what the data looks like on save: <a href="https://codebeautify.org/jsonviewer/cbff77c4" rel="nofollow noreferrer">https://codebeautify.org/jsonviewer/cbff77c4</a></p>
  
  <p>You can see that both sheets have the same pieces listed.</p>
  
  <p>I am either very close to getting to work or I am way way way off on how I built the function. But I feel like my brain is melting a little right now and could use help or suggestions on what I need to look at.</p>
  
  <p>Much appreciated. </p>