<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.modal {
display: none;
position: absolute;
top: 100px;
left: 100px;
background-color: lightyellow;
}
</style>
</head>
<body>
<div class="modal">
name: <input type="text" name="name"><br>
email: <input type="text" name="email"><br>
</div>
<table>
<tr>
<td class="name">Vladimir</td>
<td class="email">3x3er@gmail.com</td>
<td><a class="cart">Заказать</a></td>
</tr>
<tr>
<td class="name">Petor</td>
<td class="email">32x3er@gmail.com</td>
<td><a class="cart">Заказать</a></td>
</tr>
<tr>
<td class="name">Kldun</td>
<td class="email">11r3er@gmail.com</td>
<td><a class="cart">Заказать</a></td>
</tr>
</table>
<script type="text/javascript">
"use strict";
let modal = document.querySelector(".modal");
let table = document.querySelector("table");
table.addEventListener("click", (e) => {
let item = e.target;
if(!item.classList.contains("cart")) return false;
let tr = item.parentElement.parentElement;
let name = tr.querySelector(".name");
let email = tr.querySelector(".email");
modal.querySelector("input[name='name']").value = name.textContent;
modal.querySelector("input[name='email']").value = email.textContent;
modal.style.display = "block";
});
</script>
</body>
</html>