I am writing a script that inserts following html on the page

function showBut(){
    if ($('div.content-title > h4').size() > 0 && $('#calculate').size() < 1){
        const button = `<button id="calculate" style="cursor: pointer;">Calculate</button>
                        <button id="finalAmount" style="cursor: pointer;font-size: 14px;"></button>
                        <button id="linkPaste" style="cursor: pointer;font-size: 14px;"></button>`;
        $('div.content-title > h4').append(button);
    //alert("done");
    $('#calculate').click(getPrice);
    $( "#finalAmount" ).click(function() {
  navigator.clipboard.writeText($("#finalAmount").text());
});
    $( "#linkPaste" ).click(function() {
  navigator.clipboard.writeText($("#linkPaste").text());
});

}
}

window.addEventListener("load", function(){
    // ....
     'use strict';
    showBut();

    
});

The inserted html shows for a brief moment and disappears. If I keep reloading, sometimes it'll stay, but mostly it disappears.

How can I fix this?