Solution 1 :

I have solved my problem.
Using thymeleaf we can generate dynamicaly id for each row in a table. In my case I put HashMap key as a id value:

<table class="table table-light mt-1">
    <tbody>
    <tr class="col-auto table-active" th_each="institution,iter:*{situation.institutions}">
    <td th_text="${institution.value.name}"></td>
    <td><a th_id="${institution.key}" href="#" class="col-auto remove-institutioncss">Remove</a>
    </td>
    </tbody>
</table>

Second functionality is put in JS:

$( ".remove-institution-css" ).click(function() {
  $("#removeInstitutionId").val($(this).attr("id"));
  $("#situationCreateSubmit").val(false);
  $( "#situation-create" ).submit();
});

Which allows me to:
1) Assign HashMap key (table id) to the object variable removeInstitutionId
2) Set situationCreateSubmit flag as false – it’s information for backend that form is not ready for saving already.
3) Submit form.

To remind: Why do I this way?
1)I want to have completely HashMap manipulation on the backend side
2)I’m new to HTML/Thymeleaf

Hope it would help anyone.
Regards

Problem :

I’m new to front end, and have got one tricky thing I want to solve.
I’m using MVC pattern with HTML/Thymeleaf and Java on the backend side.
I create simple form which has got dynamically adding and removing items from Map. These operations itself are made on a backend side. When you want to add or remove item, you just use javascript which submit form with flag situationCreateSubmit=false.
Model which is passing through form looks like:

public class SituationRequestModel {
    @Valid
    private SituationModel situation;
    private Boolean situationCreateSubmit=true;
    private Long addInstitutionId;
    private Long removeInstitutionId;
    private Long templateDocumentId;
    private String fileName;
    private byte[] templateDocument;
}

So on the backend side, at first the situationCreateSubmit field is checking if this form is to be saved to db. If it’s false than adding/removing items on the map is made and return to the HTML page. Map itself is field of SituationModel.

I managed adding items to the map, but I have a problem with removing items.
I want to have simple row in a table with value from map and link/botton REMOVE to delete this particular row.
enter image description here

I would like to create jQuery function with some like “onclick” on Remove field to assign this particular key of map to the removeInstitutionId, set situationCreateSubmit to false and send it with post like simple submit to the controller.

In HTML form I use foreach loop through the map:

<table class="table table-dark">
     <tbody>
        <tr class="col-12 item-dark" th_each="institution,iter :*{situation.institutions}">
        <td th_text="${institution.value.name}"></td>
        <td><a id="removeinstitution" class="nav-link active"  th_field="${institution.key}" >Remove</a>
        </tr>
     </tbody>
</table>

JS which I’ve wrote looks like:

$(document).ready(function() {
$("#removeinstitution").a
        select: function(event, ui) {
            $("#removeInstitutionId").val(ui.item.key);
            $("#situationCreateSubmit").val(false);
            $( "#situation-create" ).submit();
        }
    });

I know it cannot work, but I have no clue how to pass map key to the JS and set it to the removeInstitutionId field. I know that in Thymeleaf we can use something like __institution.key__ which dynamically generate that particular value, but I don’t know what to do with that.

Information
I don’t want to change way of work-> to manipulate with map on the front end side. What I want to have map manipulation logic on the backend side.
Thank you in advance for help.

By