Users (Modal Box)/main.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>CARD GAME</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="\css\main.css">
    <script src="/javascript/main.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  </head>
<body>

    <div id="backWall">
      <div id="modalBox">
          <img id="img" alt="person" src="">
          <h3 id="fullName">s</h3>
          <div>ID: <label id="id"></label></div>
          <div>Age: <label id="age"></label></div>
          <div>From: <label id="from"></label></div>
          <div>Job: <label id="job"></label></div>
          <span class="close">&times;</span>
      </div>
    </div>
    
    <table class="table table-striped">
      <thead class="thead-dark">
        <tr>
          <th scope="col">ID</th>
          <th scope="col">First Name</th>
          <th scope="col">Last Name</th>
          <th scope="col"></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Furkan</td>
          <td>Gulsen</td>
          <td>
            <button class="btn btn-dark more" id="furkan">MORE</button>
          </td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Allen</td>
          <td>
            <button class="btn btn-dark more" id="Jacob">MORE</button>
          </td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Maria</td>
          <td>Quenn</td>
          <td>
            <button class="btn btn-dark more" id="maria">MORE</button>
          </td>
        </tr>
        <tr>
          <th scope="row">4</th>
          <td>Jack</td>
          <td>Jones</td>
          <td>
            <button class="btn btn-dark more" id="jack">MORE</button>
          </td>
        </tr>
        <tr>
          <th scope="row">5</th>
          <td>Harry</td>
          <td>Williams</td>
          <td>
            <button class="btn btn-dark more" id="harry">MORE</button>
          </td>
        </tr>
        <tr>
          <th scope="row">6</th>
          <td>Charlie</td>
          <td>Brown</td>
          <td>
            <button class="btn btn-dark more" id="charlie">MORE</button>
          </td>
        </tr>
        <tr>
          <th scope="row">7</th>
          <td>Emily</td>
          <td>Taylor</td>
          <td>
            <button class="btn btn-dark more" id="emily">MORE</button>
          </td>
        </tr>
        <tr>
          <th scope="row">8</th>
          <td>Ava</td>
          <td>Davies</td>
          <td>
            <button class="btn btn-dark more" id="ava">MORE</button>
          </td>
        </tr>
        <tr>
          <th scope="row">9</th>
          <td>Jessica</td>
          <td>Wilson</td>
          <td>
            <button class="btn btn-dark more" id="jessica">MORE</button>
          </td>
        </tr>
        <tr>
          <th scope="row">10</th>
          <td>Isabella</td>
          <td>Evans</td>
          <td>
            <button class="btn btn-dark more" id="isabella">MORE</button>
          </td>
        </tr>
      </tbody>
    </table>
    
</body>
</html>