JQuery .hover() stops working when HTML onClick() event is triggered

I have a webpage that I am working on, and am trying to incorporate some JQuery into it. This project is my first time ever using JQuery, so I could be missing something very simple.

Some Background

• I only have one event listener within my JQuery code (aside from the ${document).ready())
• I have multiple click event listeners within a separate javascript file.
• The JQuery .hover() event stops working (and gets stuck on registering as being hovered over) once any of the separate click events are triggered.

My code

jquery.js

$(document).ready(function() {
      $(".inShop").hover(function(){
            pop($(this).val());
        var divToShow = $(this).parent("p").siblings("div.popup");
        divToShow.css({
            display: "block",
            position: "absolute",
            right: ($(this).offset().left - $(this).width() - 240) + "px",
            top: ($(this).offset().top) + "px"
        });
    },
    function(){
        $("div.popup").hide();   
    });
});

index.html

        <div id="list">
            <div class="popup" style="display:none;">
                <p id="head"><strong>Info</strong></p>
                <p class="iInfo"><a id="effect">Effect: </a><a id="eFill"></a></p>
                <p class="iInfo"><a id="owned">Owned: </a><a id="oFill"></a></p>
            </div>
            <p id="available"></p>
            <p id="unavailable"></p>
        </div>

script.js

var itemShopTxt = document.getElementById('available');
...
list1 += tBreak + `<input class="inShop" name="cpc" type="button" value="${i.name}: ${price} C" onClick="{shopping(this);}"/>`;
...
itemShopTxt.innerHTML = list1;

What I've tried

• click function stops hover function from working - This was promising at first, but my css uses specific properties from the hovered element, so I wouldn't be able to strictly define it
• jQuery refresh stops jQuery hover from working - This results in the same issue
• This list does not include the links that I opened, read, and deemed irrelevant to my issue

I have included this GIF to better demonstrate what is happening:

I have researched this issue extensively, and used various different key words to try to find my answer, but nothing has worked for me. If I have missed something, please let me know.

JQuery code: How to show a div next to the hovered element with jQuery?