how to get functions to work in entire table using document.querySelectorAll()

Question

I am currently making an alert page that tells users if they get an Unacknowledged error sent to them. In my project I have a row of information that will later be gathered from a database. I have two buttons Unacknowledged and notes that when clicked the Unacknowledged will change to Knowledge and the notes button will show a popup that users can add notes. Currently only the first row works when you click those buttons but not the rest of them.

document.getElementById('seen').addEventListener('click', function(event) {
  this.textContent = this.classList.toggle('hack') ?
    'Acknowledged' :
    'Unacknowledged'
}, false);
$(document).ready(function() {
  $('#myTable').DataTable({
    responsive: true,
    "pageLength": 4
  });
});
const viewBtn = document.querySelector(".view-modal"),
  popup = document.querySelector(".popup"),
  close = popup.querySelector(".close"),
  field = popup.querySelector(".field"),
  input = field.querySelector("input"),
  copy = field.querySelector("button");

viewBtn.onclick = () => {
  popup.classList.toggle("show");
}
close.onclick = () => {
  viewBtn.click();
}

body {
  background-image: url("BackgroundAxure.png");
  background-color: #f2f0ed;
  position: auto;
}

table th:nth-child(3),
td:nth-child(3) {
  display: none;
}

body {
  padding-left: 20px;
  padding-right: 20px;
}

#Logo {
  margin-top: 10px;
  position: fixed;
  width: 300px;
  height: 46px;
  display: flex;
}

#sort {
  height: 20;
  width: 40;
}

#h1 {
  text-align: right;
  color: black;
  font-size: 39px;
}

.button {
  background-color: green;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 2px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}

table.dataTable {
  width: 100%;
  margin: 0 auto;
  clear: both;
  border-collapse: separate;
  border-spacing: 0;
}

#seen {
  width: 160px;
  height: 25px;
  background-color: #E16A6A;
  border: none;
  border-radius: 4px;
  color: black;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}

#seen.hack {
  background-color: green;
  color: black;
}

table.dataTable thead th,
table.dataTable tfoot th {
  font-weight: bold;
}

table.dataTable thead th,
table.dataTable thead td {
  border-bottom: 1px solid #111;
}

table.dataTable.display tbody tr.odd>.sorting_1,
table.dataTable.order-column.stripe tbody tr.odd>.sorting_1 {
  background-color: #f1f1f1;
}

table.dataTable.no-footer {
  border-bottom: 1px solid #111;
}

table.dataTable tbody th.dt-body-left,
table.dataTable tbody td.dt-body-left {
  text-align: left;
}

table.dataTable tbody th.dt-body-center,
table.dataTable tbody td.dt-body-center {
  text-align: center;
}

table.dataTable tbody th.dt-body-right,
table.dataTable tbody td.dt-body-right {
  text-align: right;
}

table.dataTable tbody th.dt-body-justify,
table.dataTable tbody td.dt-body-justify {
  text-align: justify;
}

table.dataTable tbody th.dt-body-nowrap,
table.dataTable tbody td.dt-body-nowrap {
  white-space: nowrap;
}


/* Search box */

.dataTables_wrapper .dataTables_length {
  float: left
}

.dataTables_wrapper .dataTables_filter {
  float: right;
  text-align: right;
}

.dataTables_wrapper .dataTables_filter input {
  margin-left: 0.5em;
}

.dataTables_wrapper .dataTables_info {
  clear: both;
  float: left;
  padding-top: 0.755em;
}

.dataTables_wrapper .dataTables_paginate {
  float: right;
  text-align: right;
  padding-top: 0.25em;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  box-sizing: border-box;
  display: inline-block;
  min-width: 1.5em;
  padding: 0.5em 1em;
  margin-left: 2px;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  *cursor: hand;
  color: #333 !important;
  border: 1px solid transparent;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: #333 !important;
  border: 1px solid #cacaca;
  background-color: #fff;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #dcdcdc));
  background: -webkit-linear-gradient(top, #fff 0%, #dcdcdc 100%);
  background: -moz-linear-gradient(top, #fff 0%, #dcdcdc 100%);
  background: -ms-linear-gradient(top, #fff 0%, #dcdcdc 100%);
  background: -o-linear-gradient(top, #fff 0%, #dcdcdc 100%);
  background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%)
}

.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {
  *margin-top: -1px;
  -webkit-overflow-scrolling: touch
}

.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th>div.dataTables_sizing,
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td>div.dataTables_sizing {
  height: 0;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
  border-bottom: 1px solid #111
}

.dataTables_wrapper.no-footer div.dataTables_scrollHead table,
.dataTables_wrapper.no-footer div.dataTables_scrollBody table {
  border-bottom: none
}

.dataTables_wrapper:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0
}

@media screen and (max-width: 767px) {
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none;
    text-align: center
  }
  .dataTables_wrapper .dataTables_paginate {
    margin-top: 0.5em
  }
}

@media screen and (max-width: 640px) {
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
    float: none;
    text-align: center
  }
  .dataTables_wrapper .dataTables_filter {
    margin-top: 0.5em
  }
}

.popup {
  position: absolute;
  left: 50%;
}

button {
  outline: none;
  cursor: pointer;
  font-weight: 500;
  border-radius: 4px;
  border: 2px solid transparent;
  transition: background 0.1s linear, border-color 0.1s linear, color 0.1s linear;
}

.view-modal {
  background-color: #1da4f1;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 2px 22px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}

.popup {
  background: #fff;
  padding: 25px;
  border-radius: 15px;
  top: -150%;
  max-width: 380px;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
  transform: translate(-50%, -50%) scale(1.2);
  transition: top 0s 0.2s ease-in-out, opacity 0.2s 0s ease-in-out, transform 0.2s 0s ease-in-out;
}

.popup.show {
  top: 50%;
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
  transition: top 0s 0s ease-in-out, opacity 0.2s 0s ease-in-out, transform 0.2s 0s ease-in-out;
}

.popup :is(header,
.icons) {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.popup header {
  padding-bottom: 15px;
  border-bottom: 1px solid #ebedf9;
}

header span {
  font-size: 21px;
  font-weight: 600;
}

header .close,
.icons a {
  display: flex;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
  transition: all 0.3s ease-in-out;
}

header .close {
  color: #878787;
  font-size: 17px;
  background: #f2f3fb;
  height: 33px;
  width: 33px;
  cursor: pointer;
}

#ExitBtn {
  color: #878787;
  font-size: 17px;
  background: #f2f3fb;
  height: 33px;
  width: 33px;
  cursor: pointer;
  position: absolute;
  right: 6%;
  align-items: center;
  border-radius: 60%;
  justify-content: center;
}

<link href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Alert Page</title>
  <meta name="description" content="Bootstrap.">
  <link rel="stylesheet" href="sty.css">
  </style>
  <link rel="stylesheet" href="alertStyle.css">
  <link rel="stylesheet" href="popup.css">
  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v3.0.6/css/line.css">
  </style>
</head>

<body style="margin:20px auto">
  <div id="Logo">
    <img id="Logo_img" class="img " src="logo.png" />
  </div>
  <div id="h1">
    <p><img id="u_img" class="img " src="user.png" /><span>UserName</span></p>
  </div>
  <div class="container"></div>

  <table id="myTable" class="table table-striped">
    <thead>
      <tr>
        <th>Timestamp<img src="arrows.png" width="12" height="auto" /></th>
        <th>Hostname<img src="arrows.png" width="12" height="auto" /></th>
        <th>File<img src="arrows.png" width="12" height="auto" /></th>
        <th>Change_agent<img src="arrows.png" width="12" height="auto" /></th>
        <th>Change_process<img src="arrows.png" width="12" height="auto" /></th>
        <th>Letter<img src="arrows.png" width="12" height="auto" /></th>
        <th>Number<img src="arrows.png" width="12" height="auto" /></th>
        <th>Acknowledge Alerts<img src="arrows.png" width="12" height="auto" /></th>
        <th>Notes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>04/02/22 12:37:00 PM</td>
        <td>Name #1</td>
        <td>C:/Programe_Files/</td>
        <td>JohnAcc</td>
        <td>Microsoft_Word</td>
        <td>1</td>
        <td>A</td>
        <td><button id="seen">Unacknowledged</button></td>
        <td><button class="view-modal">Notes</button>
          <div class="popup">
            <header>
              <span><input type="radio" id="Intentional" name="option" value="Intentional">
              <label for="Intentional">Intentional</label><br></span>
              <span><input type="radio" id="Malicious" name="option" value="Malicious">
              <label for="Malicious">Malicious</label><br></span>
              <div class="close"><i class="uil uil-times"></i></div>
            </header>
            <div class="content">
              <p></p>
              <textarea rows="10" cols="44" placeholder="Notes"></textarea>
              <div class="field"></div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td>04/02/22 12:37:00 PM</td>
        <td>Name #2</td>
        <td>C:/Programe_Files/</td>
        <td>JohnAcc</td>
        <td>Microsoft_Word</td>
        <td>2</td>
        <td>B</td>
        <td><button id="seen">Unacknowledged</button></td>
        <td><button class="view-modal">Notes</button>
          <div class="popup">
            <header>
              <span><input type="radio" id="Intentional" name="option" value="Intentional">
              <label for="Intentional">Intentional</label><br></span>
              <span><input type="radio" id="Malicious" name="option" value="Malicious">
              <label for="Malicious">Malicious</label><br></span>
              <div class="close"><i class="uil uil-times"></i></div>
            </header>
            <div class="content">
              <p></p>
              <textarea rows="10" cols="44" placeholder="Notes"></textarea>
              <div class="field"></div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td>04/02/22 12:37:00 PM</td>
        <td>Name #3</td>
        <td>C:/Programe_Files/</td>
        <td>JohnAcc</td>
        <td>Microsoft_Word</td>
        <td>3</td>
        <td>C</td>
        <td><button id="seen">Unacknowledged</button></td>
        <td><button class="view-modal">Notes</button>
          <div class="popup">
            <header>
              <span><input type="radio" id="Intentional" name="option" value="Intentional">
              <label for="Intentional">Intentional</label><br></span>
              <span><input type="radio" id="Malicious" name="option" value="Malicious">
              <label for="Malicious">Malicious</label><br></span>
              <div class="close"><i class="uil uil-times"></i></div>
            </header>
            <div class="content">
              <p></p>
              <textarea rows="10" cols="44" placeholder="Notes"></textarea>
              <div class="field"></div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td>04/02/22 12:37:00 PM</td>
        <td>Name #4</td>
        <td>C:/Programe_Files/</td>
        <td>JohnAcc</td>
        <td>Microsoft_Word</td>
        <td>4</td>
        <td>D</td>
        <td><button id="seen">Unacknowledged</button></td>
        <td><button class="view-modal">Notes</button>
          <div class="popup">
            <header>
              <span><input type="radio" id="Intentional" name="option" value="Intentional">
              <label for="Intentional">Intentional</label><br></span>
              <span><input type="radio" id="Malicious" name="option" value="Malicious">
              <label for="Malicious">Malicious</label><br></span>
              <div class="close"><i class="uil uil-times"></i></div>
            </header>
            <div class="content">
              <p></p>
              <textarea rows="10" cols="44" placeholder="Notes"></textarea>
              <div class="field"></div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td>04/02/22 12:37:00 PM</td>
        <td>Name #5</td>
        <td>C:/Programe_Files/</td>
        <td>JohnAcc</td>
        <td>Microsoft_Word</td>
        <td>5</td>
        <td>E</td>
        <td><button id="seen">Unacknowledged</button></td>
        <td><button class="view-modal">Notes</button>
          <div class="popup">
            <header>
              <span><input type="radio" id="Intentional" name="option" value="Intentional">
              <label for="Intentional">Intentional</label><br></span>
              <span><input type="radio" id="Malicious" name="option" value="Malicious">
              <label for="Malicious">Malicious</label><br></span>
              <div class="close"><i class="uil uil-times"></i></div>
            </header>
            <div class="content">
              <p></p>
              <textarea rows="10" cols="44" placeholder="Notes"></textarea>
              <div class="field"></div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  </div>
</body>

</html>

How do I change document.querySelector() to document.querySelectorAll()

Answer 1

Loop over the results of querySelectorAll, and then make all your other selectors relative to that.

document.getElementById('seen').addEventListener('click', function(event) {
  this.textContent = this.classList.toggle('hack') ?
    'Acknowledged' :
    'Unacknowledged'
}, false);
$(document).ready(function() {
  $('#myTable').DataTable({
    responsive: true,
    "pageLength": 4
  });
});
const viewButtons = document.querySelectorAll(".view-modal");

viewButtons.forEach(viewBtn => {
  const popup = viewBtn.nextElementSibling,
    close = popup.querySelector(".close"),
    field = popup.querySelector(".field"),
    input = field.querySelector("input"),
    copy = field.querySelector("button");

  viewBtn.onclick = () => {
    popup.classList.toggle("show");
  }
  close.onclick = () => {
    viewBtn.click();
  }
});

body {
  background-image: url("BackgroundAxure.png");
  background-color: #f2f0ed;
  position: auto;
}

table th:nth-child(3),
td:nth-child(3) {
  display: none;
}

body {
  padding-left: 20px;
  padding-right: 20px;
}

#Logo {
  margin-top: 10px;
  position: fixed;
  width: 300px;
  height: 46px;
  display: flex;
}

#sort {
  height: 20;
  width: 40;
}

#h1 {
  text-align: right;
  color: black;
  font-size: 39px;
}

.button {
  background-color: green;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 2px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}

table.dataTable {
  width: 100%;
  margin: 0 auto;
  clear: both;
  border-collapse: separate;
  border-spacing: 0;
}

#seen {
  width: 160px;
  height: 25px;
  background-color: #E16A6A;
  border: none;
  border-radius: 4px;
  color: black;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}

#seen.hack {
  background-color: green;
  color: black;
}

table.dataTable thead th,
table.dataTable tfoot th {
  font-weight: bold;
}

table.dataTable thead th,
table.dataTable thead td {
  border-bottom: 1px solid #111;
}

table.dataTable.display tbody tr.odd>.sorting_1,
table.dataTable.order-column.stripe tbody tr.odd>.sorting_1 {
  background-color: #f1f1f1;
}

table.dataTable.no-footer {
  border-bottom: 1px solid #111;
}

table.dataTable tbody th.dt-body-left,
table.dataTable tbody td.dt-body-left {
  text-align: left;
}

table.dataTable tbody th.dt-body-center,
table.dataTable tbody td.dt-body-center {
  text-align: center;
}

table.dataTable tbody th.dt-body-right,
table.dataTable tbody td.dt-body-right {
  text-align: right;
}

table.dataTable tbody th.dt-body-justify,
table.dataTable tbody td.dt-body-justify {
  text-align: justify;
}

table.dataTable tbody th.dt-body-nowrap,
table.dataTable tbody td.dt-body-nowrap {
  white-space: nowrap;
}


/* Search box */

.dataTables_wrapper .dataTables_length {
  float: left
}

.dataTables_wrapper .dataTables_filter {
  float: right;
  text-align: right;
}

.dataTables_wrapper .dataTables_filter input {
  margin-left: 0.5em;
}

.dataTables_wrapper .dataTables_info {
  clear: both;
  float: left;
  padding-top: 0.755em;
}

.dataTables_wrapper .dataTables_paginate {
  float: right;
  text-align: right;
  padding-top: 0.25em;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  box-sizing: border-box;
  display: inline-block;
  min-width: 1.5em;
  padding: 0.5em 1em;
  margin-left: 2px;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  *cursor: hand;
  color: #333 !important;
  border: 1px solid transparent;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: #333 !important;
  border: 1px solid #cacaca;
  background-color: #fff;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #dcdcdc));
  background: -webkit-linear-gradient(top, #fff 0%, #dcdcdc 100%);
  background: -moz-linear-gradient(top, #fff 0%, #dcdcdc 100%);
  background: -ms-linear-gradient(top, #fff 0%, #dcdcdc 100%);
  background: -o-linear-gradient(top, #fff 0%, #dcdcdc 100%);
  background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%)
}

.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {
  *margin-top: -1px;
  -webkit-overflow-scrolling: touch
}

.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th>div.dataTables_sizing,
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td>div.dataTables_sizing {
  height: 0;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
  border-bottom: 1px solid #111
}

.dataTables_wrapper.no-footer div.dataTables_scrollHead table,
.dataTables_wrapper.no-footer div.dataTables_scrollBody table {
  border-bottom: none
}

.dataTables_wrapper:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0
}

@media screen and (max-width: 767px) {
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none;
    text-align: center
  }
  .dataTables_wrapper .dataTables_paginate {
    margin-top: 0.5em
  }
}

@media screen and (max-width: 640px) {
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
    float: none;
    text-align: center
  }
  .dataTables_wrapper .dataTables_filter {
    margin-top: 0.5em
  }
}

.popup {
  position: absolute;
  left: 50%;
}

button {
  outline: none;
  cursor: pointer;
  font-weight: 500;
  border-radius: 4px;
  border: 2px solid transparent;
  transition: background 0.1s linear, border-color 0.1s linear, color 0.1s linear;
}

.view-modal {
  background-color: #1da4f1;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 2px 22px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}

.popup {
  background: #fff;
  padding: 25px;
  border-radius: 15px;
  top: -150%;
  max-width: 380px;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
  transform: translate(-50%, -50%) scale(1.2);
  transition: top 0s 0.2s ease-in-out, opacity 0.2s 0s ease-in-out, transform 0.2s 0s ease-in-out;
}

.popup.show {
  top: 50%;
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
  transition: top 0s 0s ease-in-out, opacity 0.2s 0s ease-in-out, transform 0.2s 0s ease-in-out;
}

.popup :is(header,
.icons) {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.popup header {
  padding-bottom: 15px;
  border-bottom: 1px solid #ebedf9;
}

header span {
  font-size: 21px;
  font-weight: 600;
}

header .close,
.icons a {
  display: flex;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
  transition: all 0.3s ease-in-out;
}

header .close {
  color: #878787;
  font-size: 17px;
  background: #f2f3fb;
  height: 33px;
  width: 33px;
  cursor: pointer;
}

#ExitBtn {
  color: #878787;
  font-size: 17px;
  background: #f2f3fb;
  height: 33px;
  width: 33px;
  cursor: pointer;
  position: absolute;
  right: 6%;
  align-items: center;
  border-radius: 60%;
  justify-content: center;
}

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

<head>
<link href="http://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>

  <meta charset="utf-8">
  <title>Alert Page</title>
  <meta name="description" content="Bootstrap.">
  <link rel="stylesheet" href="sty.css">
  </style>
  <link rel="stylesheet" href="alertStyle.css">
  <link rel="stylesheet" href="popup.css">
  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v3.0.6/css/line.css">
  </style>
</head>

<body style="margin:20px auto">
  <div id="Logo">
    <img id="Logo_img" class="img " src="logo.png" />
  </div>
  <div id="h1">
    <p><img id="u_img" class="img " src="user.png" /><span>UserName</span></p>
  </div>
  <div class="container"></div>

  <table id="myTable" class="table table-striped">
    <thead>
      <tr>
        <th>Timestamp<img src="arrows.png" width="12" height="auto" /></th>
        <th>Hostname<img src="arrows.png" width="12" height="auto" /></th>
        <th>File<img src="arrows.png" width="12" height="auto" /></th>
        <th>Change_agent<img src="arrows.png" width="12" height="auto" /></th>
        <th>Change_process<img src="arrows.png" width="12" height="auto" /></th>
        <th>Letter<img src="arrows.png" width="12" height="auto" /></th>
        <th>Number<img src="arrows.png" width="12" height="auto" /></th>
        <th>Acknowledge Alerts<img src="arrows.png" width="12" height="auto" /></th>
        <th>Notes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>04/02/22 12:37:00 PM</td>
        <td>Name #1</td>
        <td>C:/Programe_Files/</td>
        <td>JohnAcc</td>
        <td>Microsoft_Word</td>
        <td>1</td>
        <td>A</td>
        <td><button id="seen">Unacknowledged</button></td>
        <td><button class="view-modal">Notes</button>
          <div class="popup">
            <header>
              <span><input type="radio" id="Intentional" name="option" value="Intentional">
              <label for="Intentional">Intentional</label><br></span>
              <span><input type="radio" id="Malicious" name="option" value="Malicious">
              <label for="Malicious">Malicious</label><br></span>
              <div class="close"><i class="uil uil-times"></i></div>
            </header>
            <div class="content">
              <p></p>
              <textarea rows="10" cols="44" placeholder="Notes"></textarea>
              <div class="field"></div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td>04/02/22 12:37:00 PM</td>
        <td>Name #2</td>
        <td>C:/Programe_Files/</td>
        <td>JohnAcc</td>
        <td>Microsoft_Word</td>
        <td>2</td>
        <td>B</td>
        <td><button id="seen">Unacknowledged</button></td>
        <td><button class="view-modal">Notes</button>
          <div class="popup">
            <header>
              <span><input type="radio" id="Intentional" name="option" value="Intentional">
              <label for="Intentional">Intentional</label><br></span>
              <span><input type="radio" id="Malicious" name="option" value="Malicious">
              <label for="Malicious">Malicious</label><br></span>
              <div class="close"><i class="uil uil-times"></i></div>
            </header>
            <div class="content">
              <p></p>
              <textarea rows="10" cols="44" placeholder="Notes"></textarea>
              <div class="field"></div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td>04/02/22 12:37:00 PM</td>
        <td>Name #3</td>
        <td>C:/Programe_Files/</td>
        <td>JohnAcc</td>
        <td>Microsoft_Word</td>
        <td>3</td>
        <td>C</td>
        <td><button id="seen">Unacknowledged</button></td>
        <td><button class="view-modal">Notes</button>
          <div class="popup">
            <header>
              <span><input type="radio" id="Intentional" name="option" value="Intentional">
              <label for="Intentional">Intentional</label><br></span>
              <span><input type="radio" id="Malicious" name="option" value="Malicious">
              <label for="Malicious">Malicious</label><br></span>
              <div class="close"><i class="uil uil-times"></i></div>
            </header>
            <div class="content">
              <p></p>
              <textarea rows="10" cols="44" placeholder="Notes"></textarea>
              <div class="field"></div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td>04/02/22 12:37:00 PM</td>
        <td>Name #4</td>
        <td>C:/Programe_Files/</td>
        <td>JohnAcc</td>
        <td>Microsoft_Word</td>
        <td>4</td>
        <td>D</td>
        <td><button id="seen">Unacknowledged</button></td>
        <td><button class="view-modal">Notes</button>
          <div class="popup">
            <header>
              <span><input type="radio" id="Intentional" name="option" value="Intentional">
              <label for="Intentional">Intentional</label><br></span>
              <span><input type="radio" id="Malicious" name="option" value="Malicious">
              <label for="Malicious">Malicious</label><br></span>
              <div class="close"><i class="uil uil-times"></i></div>
            </header>
            <div class="content">
              <p></p>
              <textarea rows="10" cols="44" placeholder="Notes"></textarea>
              <div class="field"></div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td>04/02/22 12:37:00 PM</td>
        <td>Name #5</td>
        <td>C:/Programe_Files/</td>
        <td>JohnAcc</td>
        <td>Microsoft_Word</td>
        <td>5</td>
        <td>E</td>
        <td><button id="seen">Unacknowledged</button></td>
        <td><button class="view-modal">Notes</button>
          <div class="popup">
            <header>
              <span><input type="radio" id="Intentional" name="option" value="Intentional">
              <label for="Intentional">Intentional</label><br></span>
              <span><input type="radio" id="Malicious" name="option" value="Malicious">
              <label for="Malicious">Malicious</label><br></span>
              <div class="close"><i class="uil uil-times"></i></div>
            </header>
            <div class="content">
              <p></p>
              <textarea rows="10" cols="44" placeholder="Notes"></textarea>
              <div class="field"></div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  </div>
</body>

</html>