point table maker

pointtable.html

<form id="esportsForm">
  <!-- <label for="org">Organization:</label> -->
  <input type="text" id="org" placeholder="Org Name" name="org"> 
  <br>
  <br>
  <!-- <label for="tname">Tournament Name:</label> -->
  <input type="text" id="tname" placeholder="Tournament Name" name="tname">

  <table>
    <thead>
      <tr style="color:#fff;">
        <th>Team Name</th>
        <th>Wins</th>
        <th>Placement</th>
        <th>Elemination</th>
        <th>Total Points</th>
      </tr>
    </thead>
    <tbody id="teamEntries">
      <!-- This section will be dynamically populated by JavaScript -->
    </tbody>
  </table>

  <button type="button" id="addTeam">Add Team</button>
  <input type="submit" value="Submit">
</form>
<style type="text/css">
	form{
		width: 80%;
		background: linear-gradient(180deg, cyan, violet);
		padding: 10%;
		margin: 30px;
	}
	table{
		display: block;
		background: linear-gradient(180deg, crimson, cyan);
		border-radius: 6px;
		padding: 10px;
	}
	input, button{
		height: 30px;
		min-width: 20%;
		width: fit-content;
		border-radius: 6px;
		padding: 5px;
	}
	td input:not(.team-name){
		width: 50px;
		margin: 20px;

	}
	td{
		text-align: center;
	}
</style>
<script>
  document.getElementById('esportsForm').addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent form submission

    // Get the form input values
    const org = document.getElementById('org').value;
    const tname = document.getElementById('tname').value;

    // Retrieve the team entries
    const teams = [];
    const teamElements = document.querySelectorAll('.team-entry'); // Assuming each team has a class 'team-entry'
    if(teamElements.length > 12){return alert("maximum 12 team supported")}
    teamElements.forEach(teamElement => {
      const name = teamElement.querySelector('.team-name').value;
      const win = parseInt(teamElement.querySelector('.team-win').value);
      const pp = parseInt(teamElement.querySelector('.team-pp').value);
      const kp = parseInt(teamElement.querySelector('.team-kp').value);
      const tp = parseInt(teamElement.querySelector('.team-tp').value);
      teams.push({ name, win, pp, kp, tp });
    });

    // Construct the data object
    const data = {
      "org": org,
      "tname": tname,
      "tourney": ["TEAM NAME", "WIN", "PLACEMENT", "TOTAL POINT"],
      "teams": teams
    };

    console.log(data); // You can do whatever you want with the data object here
  });

  // Add a new team entry row dynamically
  document.getElementById('addTeam').addEventListener('click', function() {
    const teamEntries = document.getElementById('teamEntries');
    const newRow = document.createElement('tr');
    newRow.classList.add('team-entry');

    newRow.innerHTML = `
      <td><input type="text" class="team-name"></td>
      <td><input type="number" class="team-win" value="0"></td>
      <td><input type="number" class="team-pp" value="0"></td>
      <td><input type="number" class="team-kp" value="0"></td>
      <td><input type="number" class="team-tp" value="0"></td>
    `;
    teamEntries.appendChild(newRow);

  });


</script>