Customize right click anchor tag to open link in new tab

I have the following code to open a specific right click menu for <a>an element .

On any link I right click and click to open in a new tab, it only opens the first link. Counters in java-script are related to my inability to do so.

hrefI want to open each link on a right click so it will open the link in new tab by getting the link <a>element.

If anyone has another script, which of course should be better for this purpose, please share with me.

thanks.

Get link from database

$i =1;
$get_newbooks   =   mysqli_query($dba, "select * from mynewbooks
where status = 1
");
while ($thisbook        =   mysqli_fetch_array($get_newbooks)) {
?>
    <a href="<?php echo $thisbook['link']; ?>" id="openinnewtabt<?php echo $i++; ?>">
    <?php echo $thisbook['name']; ?>
    </a>
}

right-click menu for labels

<div class="hide" id="rmenu">
  <ul>
    <hr style="margin-top: 3px; margin-bottom: 0px; border: 1px solid black;">
    <li>
        <button style="text-align: center; color: black; width: 150px;"
        class="opennewtabt item copy-button">
        Open Link In New Tab
        </button>
    </li>
    <hr style="margin-top: 3px; margin-bottom: 0px; border: 1px solid black;">
  </ul>
</div>

CSS

.show {
  z-index: 10000000000000;
  position: absolute;
  background-color: #C0C0C0;
  border: 1px solid grey;
  padding: 2px;
  display: block;
  margin: 0;
  list-style-type: none;
  list-style: none;
}

.hide {
  display: none;
}

.show li {
  list-style: none;
}

.show a {
  border: 0 !important;
  text-decoration: none;
}

.show a:hover {
  text-decoration: underline !important;
}

Javascript

$(document).ready(function() {
    $('body').on('contextmenu', 'a', function() {
    var counter = 1;
    $('.opennewtabt').on('click', function() {
        var link = $('#openinnewtabt'+counter).attr('href');
        window.open(link, '_blank').focus();
        return false;
    });
      document.getElementById("rmenu").className = "show";
      document.getElementById("rmenu").style.top = mouseY(event) + 'px';
      document.getElementById("rmenu").style.left = mouseX(event) + 'px';

      window.event.returnValue = false;
    });
});
// this is from another SO post...  
$(document).bind("click", function(event) {
  document.getElementById("rmenu").className = "hide";
});

function mouseX(evt) {
  if (evt.pageX) {
    return evt.pageX;
  } else if (evt.clientX) {
    return evt.clientX + (document.documentElement.scrollLeft ?
      document.documentElement.scrollLeft :
      document.body.scrollLeft);
  } else {
    return null;
  }
}

function mouseY(evt) {
  if (evt.pageY) {
    return evt.pageY;
  } else if (evt.clientY) {
    return evt.clientY + (document.documentElement.scrollTop ?
      document.documentElement.scrollTop :
      document.body.scrollTop);
  } else {
    return null;
  }
}