I have an API that has a lot of information about students. I want to display more information about the student that I will select from the search bar I made

1 
// javascript
const search = document.querySelector('#search');
const matchList = document.querySelector('#match-list');
let studentsDetails;

const searchStudents = async searchText => {
    const res = await fetch('https://www.hatchways.io/api/assessment/students');

    const fetchStudents = await res.json();
    const studentsDetails = fetchStudents.students;
    console.log(studentsDetails);
    var content = [];
    for (var i = 0; i < studentsDetails.length; i++) {
        content.push(studentsDetails[i]);
    }

    // Match to current text input
    let matches = content.filter(student => {
        const regex = new RegExp(`^${searchText}`, 'gi');
        return student.firstName.match(regex) || student.lastName.match(regex);
    });

    if (searchText.length === 0) {
        matches = [];
        matchList.innerHTML = '';
    }
    console.log(matches);
    outputHtml(matches);
};
// Show result in html 
const outputHtml = matches => {
    if (matches.length > 0) {
        const html = matches.map(match => `
        <div class="card card-body mb-1">
        <img src="${match.pic}" style="width:20%; height:auto;"/>
        <h3  class="text-primry" style="float:right;width:70%; padding-top: 15px"> ${match.firstName} ${match.lastName}</h3>
        <a onclick="studentSelected('${match.id}')" class="btn btn-primary" href="#">Student Details</a>
        </div>
        `).join('');
        matchList.innerHTML = html;
    }
}
function studentSelected(id) {
    let studentId = sessionStorage.setItem('studentId', id);
    window.location = "students.html";
    return false;
}
function getStudent() {
    let studentId = sessionStorage.getItem('studentId');

    const res = await fetch('https://www.hatchways.io/api/assessment/students');

    const fetchStudents = await res.json();
    const studentsDetails = fetchStudents.students;
    console.log(studentsDetails);
    var content = [];
    for (var i = 0; i < studentsDetails.length; i++) {
        content.push(studentsDetails[i]);
    }
}

search.addEventListener('input', () => searchStudents(search.value));

//HTML Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>StudentsInfo</title>
    <link rel="stylesheet" href="https://bootswatch.com/4/solar/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-6 m-auto">
                <h3 class="text-center mb-3">Students Search</h3>
                <div class="form-group">
                    <input type="text" id="search" class="form-control form-control-lg"
                        placeholder="Enter Student Name">
                </div>
                <div id="match-list"></div>
            </div>
        </div>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/app.js"></script>

</html>```
3

Is it clear now? :point_up: