Keep html tab open while using ajax query inside tab

Ok, so I am trying to pull up user information on the same page using ajax when I click the username button. (and yes, I'm kinda a noob in the ajax/javascript department) That part is working fine. However, I wanted to create tabs for the user that will populate with the specific user info. What I'm having a hard time with is when I click on one of the user buttons, ALL the tabs start off closed. I can't figure out how to have the first tab open by default. I feel like this should be super simple, but I'm not seeing it. Here is what I have so far:

testpage.php

<?php include("settings.php");
include("header.php"); 
include("func.php"); ?>

<button onclick="showUser(1)">User 1 </button><br>
<button onclick="showUser(2)">User 2 </button><br>
<button onclick="showUser(3)">User 3 </button>
<br><br>

<div id="txtHint">Placeholder Content</div>

<?php include("footer.php"); ?>

getuser.php

<style>
table {
    width: 100%;
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
    padding: 5px;
}

th {text-align: left;}
</style>


<?php
$q = intval($_GET['q']); 

include("settings.php");
include("func.php");
if (!$connect) {
    die('Could not connect: ' . mysqli_error($connect));
}
?>
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <p>
      <?php
        mysqli_select_db($connect,"ajax_demo");
        $sql="SELECT * FROM charge WHERE charge_tenant = '".$q."'";
        $result = mysqli_query($connect,$sql);
              echo "<table>
                    <tr>
                    <th>Original Amount</th>
                    <th>Amount Paid</th>
                    <th>Open Balance</th>
                    </tr>";
                    while($row = mysqli_fetch_array($result)) {
                        echo "<tr>";
                        echo "<td>" . moneyformat($row['charge_amount']) . "</td>";
                        echo "<td>" . moneyformat($row['charge_paid']) . "</td>";
                        echo "<td>" . moneyformat($row['charge_unpaid']) . "</td>";
                        echo "</tr>";
                    }
                    echo "</table>";
                    mysqli_close($connect);
        ?><script>document.getElementById("defaultOpen").click();</script>
  </p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

func.php

<?php
<script>
function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","getuser.php?q="+str,true);
        xmlhttp.send();
    }
}

function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>

I believe the problem is possibly with the placement of <script>document.getElementById("defaultOpen").click();</script>, but I have not idea where else to put it to make it work...

EDIT

So, after hours of trying to make it work, I finally figured it out. It was incredibly simple. On my getuser.php page I simply changed <div id="London" class="tabcontent"> to <div id="London" class="tabcontent" style="display:block">. I feel silly now, but hopefully this helps someone in the future.