Thymeleaf - How to send a table as a list?

Thymeleaf - How to send a table as a list?

Greetings codeRanch. Hope you are all having a great end of 2020*.
I need help on how to solve a situation...

--Context--
I have a javafx Desktop Application. Im building now the Web version of this app.
I have a class called Tool, and it has the variable Collection<DistributionPoint> distributionPoints;
Im working on a page to add/update a Tool, like in the javafx app.



--Problem--
I have a combobox a Option/Combobox in my HTML that is filled with objects from the class "DistributionPoint" to pick from.
The user, can pick any they want and add to a table as long as its not added already in the table already (Doesnt allow repeated values).



From the UI side, everything works as it should.
When I press Save/Submit, it doesnt save the table as the distributionPoint list of 'tool'.
I've tried several things but none of them worked. Any tip on how to deal with this?



HTML file
.... <form method="POST" th:object="${tool}"  th:action="@{/tools/add}"> .... <!-- Ponto De Distribuição  (Distribution Points) --> <div class="w-100 col-md-6">                        <table id="tabledistributionPoints" class="w-100 tab" border="2" th:field="${tool.distributionPoints}" >                            <tr id="head">                                <th>Distribution Point</th>                            </tr>                            <tr th:each="ponto, index: ${tool.distributionPoints}">                                <td th:value="${ponto.id}" th:field="${tool.distributionPoints[index]}" th:text="${ponto.distributionPoint}"></td>                            </tr>                        </table> <div class="row col-md-6">                            <select id="distributionPoint" th:object="${distributionPoints}" class="form-control">                                <option></option>                                <option  th:id="${ponto.id}" th:each="ponto : ${distributionPoints}" th:value="${ponto.id}" th:text="${ponto.distributionPoint}"></option>                            </select>                            <input id="AddPonto" type="button" value="Add" name="Add" onclick="AdddistributionPoint()"/>                            <input id="RemovePonto" type="button" value="Remove"   name="Remove" onclick="RemovedistributionPoint()" /> </div> </div> .... </form> <script>            function AdddistributionPoint()            {                var ponto = $("#distributionPoint option:selected").text();                var pontoId = $("#distributionPoint option:selected").attr('id');                var pontoClean = cleanString(ponto);                var rows =  $('#tabledistributionPoints tr').length -1;                if (ponto.toString() !== "") {                                        //                    if ($("#tabledistributionPoints").find('#' + pontoClean).length === 0) {                          var k = '<input th:field="${tool.distributionPoints['+rows+'].id}" th:value="'+ponto+'"  th:name="${ponto.distributionPoint}" th:text="'+ponto+'" value="'+ponto+'" type="text" readonly="readonly "> </>';                                            $("#tabledistributionPoints > tBody:last").append(                            '<tr><td id=' + pontoClean + '   >' + k + '</td></tr>'                        );                    }                }                $("#tabledistributionPoints").on('click', 'tr', function () {                    $(this).addClass("clicked").siblings().removeClass("clicked");                });            }            ;            function RemovedistributionPoint() {                var rowCount = $("#tabledistributionPoints tr").length;                if (rowCount > 1) {                    var selected = $('#tabledistributionPoints > tbody > tr.clicked');                    if (selected !== null && selected.length > 0) {                        selected.remove();                    } else {                        $('#tabledistributionPoints  tr:last').remove();                    }                }            }            ;        </script>



   @GetMapping("/tools/add")    public ModelAndView formadd() {        ModelAndView mv = new ModelAndView("addtool");        Tool tool = new Tool();        mv.addObject(doc);        mv.addObject("distributionPoints",pontoDistribuicaoDAO.findAll());        return mv;    }    /**     * Save the tool object.     *     * @param tool     * @return     */    @RequestMapping(value = "/tools/add", method = RequestMethod.POST)    public String salvar(tool tool) {              System.out.println(tool.getdistributionPoints());                this.toolDAO.save(tool);                return "redirect:/tools";    }