javascript - Write title content from links with jQuery into DOM after the respective link

Question

I will catch the link-title and write it after the <a href link into a span. There's a nice effect to mark the links into a paragraph with a small icon aside (see picture below).

See Example and hover the Icons next to the text

This is my DOM-Markup:

No problem so far:

    $( "a.sidenote-icon" ).wrapAll( "<span class='sidenote'><cite class='icon quelle'></cite></span>" );

    var title = $( "a.sidenote-icon" ).attr('title');
    var titlewrap = "<span>" + title + "</span>";
    $( "cite" ).after(titlewrap);

If I use an each-function for several cases jQuery add the title into an span, but three times - because there three links at my paragraph. Here's my each function ..

$( "a.sidenote-icon" ).each(function() {
    $( this ).wrapAll( "<span class='sidenote'><cite class='icon quelle'></cite></span>" );
    var title = $( this ).attr('title');
    var titlewrap = "<span class='testy'>" + title + "</span>";
    $( "cite" ).after(titlewrap);
});

I have a problem with the each-func. the title should only insert once - for every link on my page with the special class. Where is my error? See the output

Answer 1

Please check the updated example

$( ".frame a.sidenote-icon:first" ).each(function() {
    $( this ).wrapAll( "<span class='sidenote'><cite class='icon quelle'></cite></span>" );

    var title = $( this ).attr('title');
    var titlewrap = "<span class='testy'>" + title + "</span>";
    $( "cite" ).after(titlewrap);

});

You need to only change selection like below:

$( ".frame a.sidenote-icon:first" ).