Jquery Previous .html() Element Still Showing When New Element Clicked

I have to write code which finds all anchors and attaches a function that displays a popup of the elements text. My code is probably a mess, but I was able to get it working howev

Solution 1:

You're binding the following click handler

    $("#closeWin").click(function () {
      $('.anchorpop').hide();
    });

inside <a> click handler so whenever a link is clicked, multiple handlers are being added.

You can avoid many unnecessary code using toggleClass() method.

You can also bind same event handlers to multiple elements by passing additional selectors.

after all your code boils down to

$(function () {
  $('a').click(function () {
    var htmlString = "<p>" + "<br><br>" + "You just clicked: <br><b>" + $(this).text() + "</b><br><br><br>" + "Click anywhere to Close" + "</p>"
    $('.pop').html(htmlString).slideFadeToggle(function () {
        $(this).toggleClass('selected');
    });
  returnfalse;
  });
  $("#closeWin, .anchorpop").click(function () {
    $('.anchorpop').hide();
  });
});

and the custome slideFadeToggle function.

Updated Fiddle