Use separate divs for each set of inputs and labels and place id in hidden input-CodePudding

I have been told i need to do as the title says and use separate divs for each set of inputs and labels and place ID in a hidden input. could any one give me advice on how to do this please as i am just learning at the moment, my code for my labels and inputs are below:::

```
          <label for="editEmployeeFirstNameInput" >First Name</label>
          <input type="text"  id="editEmployeeFirstNameInput" required>
          <label for="editEmployeeLastNameInput" >Last Name</label>
          <input type="text"  id="editEmployeeLastNameInput" required>
          <label for="editEmployeePositionInput" >Position</label>
          <input type="text"  id="editEmployeePositionInput">
          <label for="editEmployeeEmailInput" >Email</label>
          <input type="email"  id="editEmployeeEmailInput" required>
          <label for="editEmployeeDepartmentSelect" >Department</label>
          <select id="editEmployeeDepartmentSelect"  aria-label="Default select example">
```

CodePudding user response：

<div>
  <label for="editEmployeeFirstNameInput" >First Name</label>
  <input type="text"  id="editEmployeeFirstNameInput" required>
</div>
<div>
  <label for="editEmployeeLastNameInput" >Last Name</label>
  <input type="text"  id="editEmployeeLastNameInput" required>
</div>
<div>
  <label for="editEmployeePositionInput" >Position</label>
  <input type="text"  id="editEmployeePositionInput">
</div>
<div>
  <label for="editEmployeeEmailInput" >Email</label>
  <input type="email"  id="editEmployeeEmailInput" required>
</div>
<div>
  <label for="editEmployeeDepartmentSelect" >Department</label>
  <select id="editEmployeeDepartmentSelect"  aria-label="Default select example">
</div>
<input type="hidden" id="id" name="id" />