Q:

Onclick multiple function calls issue, also sending previous click data

I have a problem with duplicate calls being sent onclick of a link, which includes the previous call data if they were made.
Here is the construction of the link in question.
for (var key in res) {
        var followers = res[key].followers;
        var totalposts = res[key].totalposts;
        var id = res[key].id;
        var name = res[key].name;
        var titles = "";
        titles = '<ul class="titles">';
        if (typeof res[key].titles === "object") {
            for (var index in res[key].titles) {
                var url = res[key].titles[index].st_url;
                titles += '<li><div class="ui grid"><div class="ui fourteen wide column">\u2022 <a href="'+url+'">'+url+'</a></div><div class="ui two wide column"><a title"Remove this post" href="#" onclick="showRemPost('+id+', \''+url+'\', \''+name+'\')" id="remPostButton"><i class="ui remove grey circle icon"></i></a></div></div></li>';
            }
        }
        titles += "</ul>";
        html += 
            '<div class="ui eight wide column"><div class="ui segment" data-id="' + id + '" id="list' + id + '">' +  
            '<div class="listTitle"><h4 class="left">' + name + '</h4><div class="right"><a href="#" id="editListButton" onclick="showEditList('+id+')"><i class="edit icon"></i></a>&nbsp;<a href="#" id="remListButton" onclick="showRemList('+id+', \''+name+'\')"><i class="remove icon"></i></a></div><div class="clear"></div></div>' + 
            '<div>' + titles + 
            '</div>' +
            '<div class="footList"><div class="left"><p>Followers: <span class="follow">'+followers+'</span>' + 
            '<br/>Posts: <span class="post">'+totalposts+'</span>' + 
            /*'<br/>Upvotes: <span class="upvote">'+res[key].upvotes+'</span>' + */
            '</p></div>' + 
            '<div class="right"><a href="#" onclick="showAddPost('+id+', \''+name+'\')" class="addPostButton"><i class="ui add blue circle icon"></i></div></div><div class="clear"></a></div>' +
            '</div></div>';
    }

Then I have this code for the function call:
showAddPost = function(id, lname){
    //do stuff
    console.log("\nshowAddPost function called");
}

console.log("\nshowAddPost function called"); is showing 1 time on first click, then 2x on second click, and so on. Each time, I get the data from the previous click.
Since there are multiple links to click, any link clicked after another, will send all previous clicks and their data, as events to the showAddPost.
Ex: 1st click has "ID": "1" and "name": "One". These are sent. On the second link and second click, "ID": "2" and "name": "Two", which should only call once, and send only the Two data, but it sends the previous data, "1:One" to the function call showAddPost, then it send a second call to showAddPost for the actual link clicked with "2:Two". And the if I click on a third link, the same or different, it send the previous two data to the function.
Is the only way to resolve this by moving the onclick from the HTML to it's own .on() handler and then getting the data through data- attributes? Or can I get the data passed in an easier way with the .on() handler? Can I still use onclick and resolve this problem?
All of this is in a separate namespace, not global scope.
Thank you anyone for any help.

A:

You are most likely not closing the a tags. 
So you end up with 
<a href="#" onclick="showAddPost('+id+', \''+name+'\')" class="addPostButton">  
    <a href="#" onclick="showAddPost('+id+', \''+name+'\')" class="addPostButton">
        ...

Nesting a tags is invalid. The issue in your case is that the inner a tags will trigger all the previous since the click event bubbles upwards.

update after updated code and comment
Actually yes, the line
'<div class="right"><a href="#" onclick="showAddPost('+id+', \''+name+'\')" class="addPostButton"><i class="ui add blue circle icon"></i></div></div><div class="clear"></a></div>' +

has wrong matching on opening/closing tags. Lets break it down to see

<div class="right">
  <a href="#" onclick="showAddPost('+id+', \''+name+'\')" class="addPostButton">
    <i class="ui add blue circle icon"></i>
    </div> <!-- << this here does not match a div, it should be an a -->
</div>
<div class="clear">
  </a> <!-- << this here probably belong on the previous group -->
</div>

