How to copy the href attribute from one element to another?

So, it’s actually fairly simple but for some reason, I still can’t get this to work. I’m obviously missing something. I tried working with ID’s, Classnames, find(), and children() but nothing was successful.

As you can see in the image below, I want the buttons at the bottom to copy the ‘href’ attribute from the buttons at the top.

This is the code I use:


$('.prev-cms-btn').attr('href', $('.prev-next-content--previous').find('a').attr('href'));
$('.next-cms-btn').attr('href', $('.prev-next-content--next').find('a').attr('href'));


Furthermore, I made a short video explaining the problem and the solution. Feel free to watch this.

If you decide to have a look at the ‘read-only’ link: you can find this situation on the collection template page: ‘chefs template’

Here is my site Read-Only: (

Live link:

This is the code that worked for me:


window.onload = function() {
    const value1 = document.getElementById("prev-next-content--previous").querySelector('a').getAttribute("href");
    const value2 = document.getElementById("prev-next-content--next").querySelector('a').getAttribute("href");



Important: Run this code after the page is done loading. Otherwise, you’ll get this error: " Uncaught TypeError: Cannot read property ‘getAttribute’ of null"