Jquery hover function works only on page reload – chrome extension

I’ve created a chrome extension for a website which appends a button(let’s call it x) to a button present in the webpage (let’s call it y) on hovering ‘y’. This button ‘y’ will be present on all pages navigated within the website. It’s like a blog or for example Facebook, where the like button is present for every post. For the first time a link is clicked from the homepage,’x’ gets appended to y. But when an other link is clicked from that page, the new page doesn’t append ‘x’ on hovering ‘y’. But what I noticed is, the code right before the hover gets executed. I have console.log() line right before the on hover function and this gets printed. But hover isn’t working, however, if the page is reloaded, hover works and ‘x’ gets appended to ‘y’. Here , ‘y’ refers to p and ‘x’ to ‘btnOne’.

      console.log("ready");
      var c = document.getElementsByClassName("multirecord u-flexColumn u-width60")[0];
 console.log("c");

      var btnOne = document.createElement('button');
      btnOne.setAttribute("id","b1");
      var textOne = document.createElement('span');
      textOne.textContent = '10';
      textOne.style.color = ColorCode
      btnOne.appendChild(textOne);
      btnOne.setAttribute("style","display:block;position: absolute;left:-25px;top:-20px;border:1px solid #ccc; background-color: #fff; border-radius: 50%; transition: background-color 0.5s ease")


      var count;
      var delay=20000, setTimeoutConst;
      var p = document.getElementsByClassName("multirecord  u- u-marginBottom10 u-width60")[0];

      function RemoveButton(){
        p.removeChild(btnOne);

      }
      console.log("reached before hover");
      console.log(c);

      $(c).hover(function(e) {
          console.log("print");
          if (!p.contains(btnOne)) {
            p.appendChild(btnOne);
        },
      function(e) {
          setTimeoutConst = setTimeout(function(){
            if(btnOne){
              $('#b1').off('click');

                if (p.contains(btnOne)) {
                  RemoveButton();
                }
            }
       }

This is a snippet of code in my content.js. Here, “reached before hover” and the element ‘c’ gets printed each time on navigation, but hover works only on reload, so “print” doesn’t get printed. Here’s my background script:

chrome.tabs.onUpdated.addListener(function(tabId,changeInfo,tab) {
    if(changeInfo.url){
     console.log("tab url changed");
    chrome.tabs.executeScript(tabId, {file: "js/jquery-3.2.1.min.js"});
         chrome.tabs.executeScript(tabId, {file: "payload.js"});
        }

});