POST Controller not save new object with One To Many

Question

I have a new item to save via the thymealf form. I have 3 items, Element1, Element2, Element3. I create the Element3 objects at first.

@Entity
public class Element1 {

@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private Integer id;
private String foo;

@OneToOne(cascade = CascadeType.ALL)
private Element2 element2;
@OneToMany(mappedBy = "element1",cascade = CascadeType.ALL)
private List<Element3> element3List;
//getter and setter

@Entity
public class Element2 {

@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private Integer id;
private String foo;
@OneToOne(mappedBy = "element2")
private Element1 element1;
//getter and setter

@Entity
public class Element3 {

@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private Integer id;
private String foo;

@ManyToOne
private Element1 element1;
//getter and setter

Next I want to create an Element1 object which contains the Element2 object and a list of Element3 objects.

Controller

@Controller
public class Element1Controller {

@GetMapping("/saveElement1")
public String saveWeek(Model model) {
    model.addAttribute("element2" , new Element2());
    model.addAttribute("element1" , new Element1());
    model.addAttribute("element3List" , element3Service.getAllElement3());
    return "addElement1";
}

 @PostMapping("/addElement1Form")
    public String addWeekView(@ModelAttribute ("element1") Element1 element1,
                              @ModelAttribute ("element2") Element2 element2,
                              @ModelAttribute ("element3List") List<Element3> 
  element3List) {
     element1.setElement2(element2);
     element1.setElement3List(element3List);
     element1Service.saveElement1(element1);
     return "redirect:/saveElement1";
    }

 }

Thymeleaf form:

<form class="form" action="#" th:action="@{/addElement1Form}" method="post" >

<div th:object="${element1}" class="col">Enter element1 information
      <div class="row">
          <p>Foo: <input type="text" th:field="${element1.foo}" class="form- 
  control"/></p>
      </div>
  </div>
  
  <div th:object="${element2}" class="col">Enter element2 information
      <div class="row">
          <p>Foo: <input type="text" th:field="${element2.foo}" class="form- 
   control"/></p>    
      </div>
  </div>

  <div class="col-lg-3" th:object="${element3List}">
      <select class="form-control" id="testOrder" name="testOrder">
          <option value="">Select Element3</option>
          <option th:each="element3 : ${element3List}"
                  th:value="${element3.id}"
                  th:text="${element3.foo}"></option>
      </select>

      <select class="form-control" id="testOrder1" name="testOrder">
          <option value="">Select Element3</option>
          <option th:each="element3 : ${element3List}"
                  th:value="${element3.id}"
                  th:text="${element3.foo}"></option>
      </select>
       <p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /> 
   </p>
   </form>

I can easily create the Element 1 object with the Element2 object inside, but not save a list of Element3 inside Element1. I don't understand what the problem is because in my form I can find all the objects of Element3.So I just want to create an Element1 object, which has as fields an Element2 object and a list of Element3 (for example 2 as in the form). Thanks in advance for the answers and help.