JSFiddle - React, Tailwind, and code Playground

by tara5

HTML

<div class="invoice">
  <div class="header">
    <div contenteditable data="date">15-Jan-2020</div>
    <div contenteditable  data="buyer">McDonalds</div>
    <div contenteditable  data="order">145632</div>
  </div>
  <div class="item">
    <div contenteditable data="name">Big Mac</div>
    <div contenteditable data="quantity">5</div>
    <div contenteditable data="rate">20.00</div>
  </div>
  <div class="item">
    <div contenteditable data="name">Small Mac</div>
    <div contenteditable data="quantity">10</div>
    <div contenteditable data="rate">10.00</div>
  </div>
</div>

<button>Loop</button>

JavaScript

var button = $("button")
button.on("click",function() {
	const jsonObj =[];
  
  $('.invoice').each((index, item) => {
     const invoice = {
     		header: {},
        items: []
     };
     
     $(item).find('.header > div').each((index, item) => {
     		const key = $(item).attr('data');
        invoice.header[key] = $(item).text();
     });
     
     $(item).find('.item').each((index, item) => {
     		const itemObj = {};
        
        $(item).find('div').each((index, item) => {
        	const key = $(item).attr('data');
        	itemObj[key] = $(item).text();
        });
        
        invoice.items.push(itemObj);
     });
     
     jsonObj.push({
     	Invoice: invoice
     });
  });
  
  console.log(jsonObj);
});