I'm having two tables and trying to get value of td having class name "alter" from each table. I got values from td which is having class name "alter" using each function. After getting the values I'm trying to append those values in to div.newClass. But it's appending both two values in both div.newClass.

Requirement in image:

[![enter image description here](https://i.stack.imgur.com/X4rFP.jpg)](https://i.stack.imgur.com/X4rFP.jpg)

```js
$('table td').each(function(cellIndex) {
  var newVar = [];
  newVar.push($('table').find('td.alter').eq(cellIndex).html());
  $('table').append("<div class='newClass'>" + newVar + "</div>")
});
```

```css
.newClass {
  color: red;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<table class="simple-example-table">
  <tbody>
    <tr>
      <td class="alter">Value 1</td>
      <td>Section 02</td>
      <td>Section 03</td>
      <td>Section 04</td>
      <td>Section 05</td>
      <td>Section 07</td>
      <td>Section 08</td>
      <td>Section 09</td>
      <td>Section 10</td>
      <td>Section 11</td>
      <td>Section 12</td>
      <td>Section 13</td>
      <td>Section 14</td>
      <td>Section 15</td>
    </tr>
  </tbody>
</table>

<table class="simple-example-table">
  <tbody>
    <tr>
      <td class="alter">Value 2</td>
      <td>Content 02</td>
      <td>Content 03</td>
      <td>Content 04</td>
      <td>Content 05</td>
      <td>Content 07</td>
      <td>Content 08</td>
      <td>Content 09</td>
      <td>Content 10</td>
      <td>Content 11</td>
      <td>Content 12</td>
      <td>Content 13</td>
      <td>Content 14</td>
      <td>Content 15</td>
    </tr>
  </tbody>
</table>

</table>
```