Retrieve row data from bootstrap class table and highlight it

I wanted to be able to select and retrieve data from the row of the bootstrap table by clicking. The problem is my tr is done automatically though js most of the people on the internet use jquery which I tried but no luck. Here is the table Here is the code that is related:

<div class="section" id="ViewItemsPage">
<div class="container">
    <div class="col-md-12">
        <h3 style="text-align: center">Items</h3>
        <br>
    </div>
    <table id="itemViewTable" class="table table-bordered table-hover">
        <thead>
        <tr>
            <th scope="col">ID</th>
            <th scope="col">Name</th>
            <th scope="col">Picture ID</th>
            <th scope="col">Serial Number</th>
            <th scope="col">Model Number</th>
            <th scope="col">Tag Number</th>
            <th scope="col">State</th>
            <th scope="col">Asset type</th>
            <th scope="col">Price</th>
            <th scope="col">Entered By</th>
            <th scope="col">Vendor</th>
            <th scope="col">Brand</th>
            <th scope="col">Remark</th>
            <th scope="col">Deleted</th>
        </tr>
        </thead>
        <tbody id="itemViewTableBody">
        <tr>
            <th scope="row">1</th>
            <td>something</td>
            <td>1</td>
            <td>Company name</td>
            <td>05/07/2020</td>
            <td>05/07/2022</td>
            <td>something</td>
            <td>1</td>
            <td>Company name</td>
            <td>05/07/2020</td>
            <td>05/07/2022</td>
            <td>something</td>
            <td>1</td>
        </tr>
        <tr>
            <th 1="row">2</th>
            <td>something</td>
            <td>2</td>
            <td>Company name</td>
            <td>05/07/2020</td>
            <td>05/07/2022</td>
            <td>something</td>
            <td>2</td>
            <td>Company name</td>
            <td>05/07/2020</td>
            <td>05/07/2022</td>
            <td>something</td>
            <td>Company name</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>something</td>
            <td>3</td>
            <td>Company name</td>
            <td>05/07/2020</td>
            <td>05/07/2022</td>
            <td>3</td>
            <td>Company name</td>
            <td>05/07/2022</td>
            <td>3</td>
            <td>Company name</td>
            <td>05/07/2020</td>
            <td>05/07/2022</td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td>something</td>
            <td>4</td>
            <td>Company name</td>
            <td>05/07/2020</td>
            <td>05/07/2022</td>
            <td>something</td>
            <td>4</td>
            <td>05/07/2020</td>
            <td>05/07/2022</td>
            <td>Company name</td>
            <td>05/07/2020</td>
            <td>05/07/2022</td>
        </tr>
        </tbody>
    </table>
    <div class="col-md-3">
        <button id="viewDetailsItemBtn" type="button" class="btn btn-primary btn-lg btn-block">View Details</button>
    </div>

    <div class="col-md-3">
        <button type="button" class="btn btn-primary btn-lg btn-block">Edit Item</button>
    </div>

    <div class="col-md-3">
        <button type="button" class="btn btn-primary btn-lg btn-block">Delete Item</button>
    </div>

    <div class="col-md-3">
        <button id="deletedItemBtn" type="button" class="btn btn-primary btn-lg btn-block">View Deleted items
        </button>
    </div>

</div>

Javascript code to replace the tr from phpmyadmin:

<script>
 
    var deletedItem = false;
 
    document.getElementById("deletedItemBtn").onclick = function () {
        if (deletedItem == false) {
            deletedItem = true;
        } else {
            deletedItem = false;
 
        }
 
        itemTableView();
 
    }
 
    itemTableView();
 
    function itemTableView() {
 
 
        const itemViewTable = document.getElementById("itemViewTable");
        $("#itemViewTableBody").empty();
        var ajax = new XMLHttpRequest();
        var method = "GET";
        var url = "database.php";
        var asynchronous = true;
 
 
        ajax.open(method, url, asynchronous);
        ajax.send();
        ajax.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                data = JSON.parse(this.responseText);
 
 
                for (var i = 0; i < data.length; i++) {
                    var itemID = data[i].itemID;
                    var itemAssetName = data[i].itemAssetName;
                    var itemPictureID = data[i].itemPictureID;
                    var itemSerialNumber = data[i].itemSerialNumber;
                    var itemModelNumber = data[i].itemModelNumber;
                    var itemTagNumber = data[i].itemTagNumber;
                    var itemState = data[i].itemStateID;
                    var itemAssetType = data[i].itemAssetTypeID;
                    var itemPrice = data[i].itemPrice;
                    var itemEnteredBy = data[i].itemEnteredByID;
                    var itemVendor = data[i].itemVendorID;
                    var itemBrand = data[i].itemBrandID;
                    var itemRemark = data[i].itemRemark;
                    var itemDeletedItem = data[i].itemDeletedItem;
 
 
                    if (itemDeletedItem == 0 || deletedItem == true) {
 
 
                        statefound = false;
                        for (j = 0; j < stateData.length; j++) {
 
                            if (statefound == false) {
                                if (itemState == stateData[j].stateID) {
 
                                    var itemStateNameEdit = stateData[j].stateName;
                                    statefound = true;
                                } else {
                                    var itemStateNameEdit = "";
 
                                }
                            }
                        }
 
 
                        assetTypefound = false;
                        for (j = 0; j < assetTypeData.length; j++) {
 
                            if (assetTypefound == false) {
                                if (itemAssetType == assetTypeData[j].assetTypeID) {
 
                                    var itemAssetTypeEdit = assetTypeData[j].assetTypeName;
                                    assetTypefound = true;
                                } else {
                                    var itemAssetTypeEdit = "";
 
                                }
                            }
                        }
 
 
                        vendorfound = false;
                        for (j = 0; j < vendorData.length; j++) {
 
                            if (vendorfound == false) {
                                if (itemVendor == vendorData[j].vendorID) {
 
                                    var itemVendorNameEdit = vendorData[j].vendorName;
                                    vendorfound = true;
                                } else {
                                    var itemVendorNameEdit = "";
 
                                }
                            }
                        }
 
                        brandfound = false;
                        for (j = 0; j < brandData.length; j++) {
 
                            if (brandfound == false) {
                                if (itemVendor == brandData[j].brandID) {
 
                                    var itemBrandNameEdit = brandData[j].brandName;
                                    brandfound = true;
                                } else {
                                    var itemBrandNameEdit = "";
 
                                }
                            }
                        }
 
 
                        if (itemDeletedItem == 1) {
                            itemDeletedItem = "Yes";
                        }
 
                        if (itemDeletedItem == 0) {
                            itemDeletedItem = "No";
                        }
 
 
                        var tbodyRef = document.getElementById('itemViewTable').getElementsByTagName('tbody')[0];
                        var newRow = tbodyRef.insertRow();
                        var newCell = newRow.insertCell();
                        var newText = document.createTextNode(itemID);
                        newCell.appendChild(newText);
 
 
                        var newCell = newRow.insertCell();
                        var newText = document.createTextNode(itemAssetName);
                        newCell.appendChild(newText);
 
                        var newCell = newRow.insertCell();
                        var newText = document.createTextNode(itemPictureID);
                        newCell.appendChild(newText);
 
                        var newCell = newRow.insertCell();
                        var newText = document.createTextNode(itemSerialNumber);
                        newCell.appendChild(newText);
 
                        var newCell = newRow.insertCell();
                        var newText = document.createTextNode(itemModelNumber);
                        newCell.appendChild(newText);
 
                        var newCell = newRow.insertCell();
                        var newText = document.createTextNode(itemTagNumber);
                        newCell.appendChild(newText);
 
                        var newCell = newRow.insertCell();
                        var newText = document.createTextNode(itemStateNameEdit);
                        newCell.appendChild(newText);
 
                        var newCell = newRow.insertCell();
                        var newText = document.createTextNode(itemAssetTypeEdit);
                        newCell.appendChild(newText);
 
                        var newCell = newRow.insertCell();
                        var newText = document.createTextNode(itemPrice);
                        newCell.appendChild(newText);
 
                        var newCell = newRow.insertCell();
                        var newText = document.createTextNode(itemEnteredBy);
                        newCell.appendChild(newText);
 
                        var newCell = newRow.insertCell();
                        var newText = document.createTextNode(itemVendorNameEdit);
                        newCell.appendChild(newText);
 
                        var newCell = newRow.insertCell();
                        var newText = document.createTextNode(itemBrandNameEdit);
                        newCell.appendChild(newText);
 
                        var newCell = newRow.insertCell();
                        var newText = document.createTextNode(itemRemark);
                        newCell.appendChild(newText);
 
                        var newCell = newRow.insertCell();
                        var newText = document.createTextNode(itemDeletedItem);
                        newCell.appendChild(newText);
 
                    }
                }
            }
        };
 
    }
 
</script>