Is there a way to append a link an have it perform a seperate function (when clicked) from the other links

Is there a way to append a link an have it perform a seperate function (when clicked) from the other links

I have links that just display "More" that call a function (when clicked) to display more citation links. Problem is they are performing the same function as the citation links AND then adding more links.
 
I have a list of citations that I create with a function inside an ajax call

// Loop function for each section (10 citations per section)
var loopSection = function(start, stop) {

    // Http setup for all links
    var linkBase = "http://www.sciencebase.gov/catalog/item/";
                                     
    // Link for citation information
    var link = "";

    for (var j = start; j < stop; j++) {
        // Create a link using the items id
        link = linkBase + json.items[j].id;

        // Title links. $ in front of variable is convention for a variable holding an object                             
        var $anchor = $("<a>", {href: link, id: "id" + j, text: json.items[j].title});

        // .parent() will get the <li> that was just created and append to the first citation element
        $anchor.appendTo("<li>").parent().appendTo("#citations");
                                                         
     }
}

I call the function to get the first 10 citations

// Get the first 10 citations                                              
loopSection(0, 10);

I then add a link to call the function again when clicked

// 'More' link to be added after each section if there are more links                          
var moreLinks = $('<a href="" id="nextLink">More...</a>');

// Add the 'More' link to the citation section
$('#citations').append(moreLinks);
    
If the moreLinks is clicked call the function again with new numbers
                                      
// Add a section for every 10 links if 'More' is clicked
$(moreLinks).on('click', function (e) {
    e.preventDefault();
                                                         
    loopSection(40, 50);       
    event.stopPropagation();
}); // END More link click event 

If a citation link is clicked an alert is displayed
// This section opens a new page to display information for the citation clicked. The citation links are disabled
// if the end of the citation list is reached             
$('body').on('click', '#citations a', function(e) {
    e.preventDefault();
                              
    alert('citations');
});

Problem is the "More" links which I only used to call the function and get more links is being treated as a citation link itself since (I think) it's being appended to citations?? What I'm trying to accomplish is a list where when some wants the next set of links they can click more OR they can click the link which will open up another page with more information. I've tried event.stopPropagation() but that won't work since I need the citation links (except for the "More" link) to perform the same function.

Any help is appreciated and thank you