Thymeleaf retrieving text from input with similar field name adding it to another separated by comma

I'm asking for help because thymeleaf does somthing weird:
Here is my form:

<form action="#" th:action="@{/add-new-board}" method="post">
<p>Board name: <input type="text" th:name="board" th:field="${board.name}" /></p>
<p th:if="${#fields.hasErrors('board.name')}" th:errors="${board.name}">Name Error</p>
<p>Section #1 name: <input type="text" th:name="section" th:field="${section.name}" /></p>
<p th:if="${#fields.hasErrors('section.name')}" th:errors="${section.name}">Name Error</p>
<p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
</form>

Here is my controller:

@GetMapping(path = "/add-new-board")
public String addNewBoardForm(Model model) {
model.addAttribute("board", new Board());
model.addAttribute("section", new Section());
return "fragments/forms/add-new-board";
}
@PostMapping(path = "/add-new-board")
public String addNewBoardSubmit(@Valid @ModelAttribute Board board,
@Valid @ModelAttribute Membership membership,
@Valid @ModelAttribute Section section,
@AuthenticationPrincipal UserDetailsImpl principal,
BindingResult result,
RedirectAttributes attributes) {
if (result.hasErrors()) {
attributes.addFlashAttribute("create_board_fail", "Check if you have all fields");
return "fragments/forms/add-new-board";
} else {
board.setCreated_at(LocalDateTime.now());
Slugify slug = new Slugify();
board.setSlug(slug.parse(board.getName()));
boardRepository.save(board);
User user = userRepository.findByEmail(principal.getEmail()).get();
membership.setMember_type(MemberType.MANAGER);
membership.setBoardId(board);
membership.setUserId(user);
membershipRepository.save(membership);
section.setBoard(board);
section.setColor(ColorType.BLUE_BASIC);
section.setOrdering(1);
sectionRepository.save(section);
attributes.addFlashAttribute("create_board_success", "You successfully added a new board!");
return "redirect:/";
}

So, my goal is to insert text from 1st input to "board" table to a column "name", and insert text from 2nd input to "section" table to a column "name". So this column titles are similar. Now when I run code, fill inputs and submit it, I'm getting to my database:

database tables img

Where "AAA" is what I wrote in 1st input, and "BBB" in 2nd

This is happening because you are using th:field incorrectly. th:field is designed to be used with a single th:object but right now you are using 2 different objects board and section. When the HTML is rendered, both inputs probably have the same name="name" and when that is submitted, the values are concatenated together and you get the behavior you are seeing.

You should instead add Board and Section to a single object, and use that as your form. For example, if you created a BoardForm object:

public class BoardForm {
private Board board = new Board();
private Section section = new Section();
// Getters and setters...
}

added that to your model instead

model.addAttribute("form", new BoardForm());

then your html would look like this

<form action="#" th:action="@{/add-new-board}" th:object="${form} method="post">
<p>Board name: <input type="text" th:name="board" th:field="*{board.name}" /></p>
<p>Section #1 name: <input type="text" th:name="section" th:field="*{section.name}" /></p>
<p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
</form>