Untitled

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product List</title>
</head>
<body>

<h2>Product List</h2>
<ol id="productList">
  <li>Product 1 <button type="submit" onclick="addProduct(1)">Add</button></li>
  <li>Product 2 <button type="submit" onclick="addProduct(2)">Add</button></li>
  <li>Product 3 <button type="submit" onclick="addProduct(3)">Add</button></li>
  <li>Product 4 <button type="submit" onclick="addProduct(4)">Add</button></li>
  <li>Product 5 <button type="submit" onclick="addProduct(5)">Add</button></li>
  <li>Product 6 <button type="submit" onclick="addProduct(6)">Add</button></li>
  <li>Product 7 <button type="submit" onclick="addProduct(7)">Add</button></li>
</ol>

<h2>Selected Products</h2>
<ul id="selectedProducts"></ul>

<script>
function addProduct(productId) {
  var productList = document.getElementById('productList');
  var selectedProducts = document.getElementById('selectedProducts');
  var product = productList.querySelector('li:nth-child(' + productId + ')').textContent;
  var listItem = document.createElement('li');
  listItem.textContent = product;
  selectedProducts.appendChild(listItem);
}
</script>

</body>
</html>