I'm trying to do a sort of invoicing system, and the html looks like this:

```html
<invoice>
  <headers>
    <div date contenteditable>15-Jan-2020</div>
    <div buyer contenteditable>McDonalds</div>
    <div order contenteditable>145632</div>
  </headers>
  <item>
    <div name contenteditable>Big Mac</div>
    <div quantity contenteditable>5</div>
    <div rate contenteditable>20.00</div>
  </item>
  <item>
    <div name contenteditable>Small Mac</div>
    <div quantity contenteditable>10</div>
    <div rate contenteditable>10.00</div>
  </item>
</invoice>

<button>Loop</button>

```

I need to loop through each `<invoice>` and get details from `<headers>` and `<item>`, so the end results look like this.

```
date : 15-Jan-2020 buyer : McDonalds order:145632
item : Big Mac quantity : 5 rate : 20.00
item : Small Mac quantity : 10 rate : 10.00

```

I plan on sending this data as json to a PHP script for processing.

The problem is, `<headers>`,`<items>` wont be the only containers in each invoice. There could be `<address>`,`<transporter>` etc. but they'll all be inside each `<invoice>`.

With that being the case, how can I loop through each container and get it's data?

Here's the jQuery I was attempting:

```
var button = $("button")

button.on("click", function() {
  $('invoice').each(function() {
    alert('It works');

  });
});

```

[Fiddle here](https://jsfiddle.net/31wsrbh4/1/)