I have a piece of array data like:

```
$array = {
    "sections" : {
        "H": {
            "name": "dummy",
            "html": "<div id="dummy">d</div>"
        }
    }
}

```

I am featching the data on click event like this 

```
$htmlData = $array["sections"]["H"]['html'];

```

Now what I want : After clicking the button the html comes out (working) and the id dummy will increase everytime on click

By default it is : 

```
<div id="dummy">d</div>

```

On first time it remain the same : 

```
<div id="dummy">d</div>

```

but on second click it becomes :

```
<div id="dummy--1">d</div>

```

on third click :

```
<div id="dummy--2">d</div>

```

and so on.

```js
$array = {
 "sections" : {
  "H": {
   "name": "dummy",
   "html": "<div id=\"dummy\">d</div>"
  }
 }
}

$(function(){
 $('#cm').click(function(event) {
  $htmlData = $array["sections"]["H"]['html'];
    console.log($htmlData);
 });
})
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="cm">Click me</button>
```