I have made a table. In that, when I click on button, a row is added. I want to assign alternate color to the row inserted.

```js
$("#new-row").click(function() {
  $('#first').clone(true).insertAfter('#demo tbody>tr:last');

  if ($('#demo tr:last').hasClass("lgrey")) {
    $('#demo tr:last').removeClass("lgrey");
    $('#demo tr:last').addClass("dgrey");
  } else if ($('#demo tr:last').hasClass("dgrey")) {
    $('#demo tr:last').removeClass("dgrey");
    $('#demo tr:last').addClass("lgrey");
  };

});
```

```css
.lgrey {
  background-color: #eee;
}

.dgrey {
  background-color: #ccc;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="demo">
  <tr>
    <th>H1</th>
    <th>H2</th>
    <th>H3</th>
  </tr>
  <tr class="lgrey" id="first">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

<button id="new-row">ADD ROW</button>
```

But running this code does not give desired result.

Please help in assigning an alternate color to inserted rows.