Reloading page custom fetched data

Basically I’m trying to load a tab with the following unique_id data from a button. The issue is I want the tab to load with the corresponding variable without reloading the page. I’ve looked on here for solutions regarding ajax URL rewrite but nothing is working. I dont care about adding more files here and there I just need a solution to this minor problem. Thanks

<a href="?user_id='. $row['unique_id'] .'">
... blah .. stuff.. etc
</a>

Answer

Ajax loading into a tab in 2 flavors, vanilla and jquery

function loadTabOG() {
  let url = 'someURLThatWillReturnHTML.php';
  fetch(url)
    .then(response => response.text())
    .then(html => {
      document.getElementById('tab-2').innerHTML += html
    })


  // the snippet won't allow us to do an ajax request, so we'll simulate the response here.
  document.getElementById('tab-2').innerHTML += "<p>Here is some new html from regular javascript</p>";
}


function loadTabJQ() {
  let url = 'someURLThatWillReturnHTML.php';
  $.ajax({
    url: url,
  }).done(function(html) {
    $('#tab-2').append(html)
  });

  // the snippet won't allow us to do an ajax request, so we'll simulate the response here.
  $('#tab-2').append("<p>Here is some new html from jquery</p>")
}

.tab {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 15px;
  margin: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='tab' id='tab-1'>
  <h3>Tab 1</h3>
  <ul>
    <li><a href='javascript:void(0)' onclick='loadTabOG()'>Load tab 2 using regular javascript</a>
    </li>
    <li> <a href='javascript:void(0)' onclick='loadTabJQ()'>Load tab 2 using jquery</a>
    </li>
  </ul>
</div>

<div class='tab' id='tab-2'>
  <h3>Tab 2</h3>
  <div>