Question: I'm trying to prepend a tag to each h2 based on the content that specific h2. Here's what I've tried:

```
jQuery(document).ready(function() {
    jQuery( "h2" ).each(function(){
        var $headingcontent = jQuery('h2').html().toLowerCase();
        jQuery('h2').prepend('<a id="'+ $headingcontent +'"></a>');
    });
});

```

However, this seems to only get the content of the first h2 and prepend it to every h2, it does this multiple times depending on how many h2's are on the page.

What I would like it to do is turn this:

```
<h2>Heading 1</h2>
<h2>Heading 2</h2>

```

in to

```
<h2><a id="heading 1"></a>Heading 1</h2>
<h2><a id="heading 2"></a>Heading 2</h2>

```

Answer: 
I would instead nest the anchor inside the `H2` element.

```
$( "h2" ).each(function(_,el){//Get each element as el and _ as index
    el = $(el); // Cache for performance
    var $headingcontent = el.text().toLowerCase();//Get the text
    //Replace h2 content with the an anchor element with same content;
    el.html('<a id="'+ encodeURIComponent($headingcontent) +'">' 
    + $headingcontent
    + '</a>');
});

```

and ofcourse you don't need I\anchor element at all

```
$( "h2" ).each(function(_,el){//Get each element as el and _ as index
    el = $(el); // Cache for performance
    var $headingcontent = el.text().toLowerCase();/Get the text
   //Add id to element for navigational purposes.
    el.prop('id', encodeURIComponent($headingcontent));
});

```
First i'd make sure it only applies to the H2's you intend, down the line you/someone else may add a h2 somewhere else and get unexpected results...

```
<h2 class='content'>Heading 1</h2>
<h2 class='content'>Heading 2</h2>

```

code:

```
jQuery(document).ready(function() {
    jQuery('h2.content').each(function(){
var target = $(this);
        jQuery(target).append($('<a/>',{'id':$(target).text(),text:$(target).text()}));
    });
});

```