How to update a table row by passing data from a Bootstrap modal form

Question

I'm fresh in web development and I'm facing some problems

I have an html page that displays a table. Each row contains data and an "edit" button. What I want is the following:

I already could invoke the modal form and make it pop up with data corresponding to the row's data (through the button "edit") before I add this code to my form tag th:action="@{/countries/update/{id} (id =${countryToUpdate.id})}" and hence I get this following error:

org.springframework.expression.spel.SpelEvaluationException: EL1007E: Property or field 'id' cannot be found on null

I know that the passed model attribute countryToUpdateis null I'm asking if it's possible to pass a model attribute to a the bootstrap modal form

That's my html table:

    <table class="table">
        <tr>
            <th>Id</th>
            <th>Description</th>
            <th>Capital</th>
            <th>Code</th>
            <th>Actions</th>
        </tr>
        <tr th:each="country:${countries}">
            <td th:text="${country.id}"></td>
            <td th:text="${country.description}"></td>
            <td th:text="${country.capital}"></td>
            <td th:text="${country.code}"></td>
            <td>
         <!--Edit button to invoke the bootstrap form-->
                <div class="btn-group">
                    <a th:href="@{/countries/findById/{id} (id=${country.id})}" class="btn btn-primary editModalBtn" data-toggle="modal" data-target="#editModal">Edit</a>
                </div>
            </td>

        </tr>
    </table>

The bootstrap form:

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
          <div class="modal-content">
              <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">New message</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                  </button>
              </div>
              <div class="modal-body">
                  <!--the action attribute of the from indicates to where the form is gonna be submitted-->
                  <form th:action="@{/countries/update/{id} (id =${countryToUpdate.id})}" method="post" th:object="${countryToUpdate}">
                      <div class="form-group">
                          <label for="descriptionEdit" class="col-form-label">Description</label>
                          <!--name should correspond to the fields in the modal class-->
                          <input
                                  type="text"
                                  class="form-control"
                                  id="descriptionEdit"
                                  name="description"
                                 >
                      </div>
                      <div class="form-group">
                          <label for="capitalEdit" class="col-form-label">Capital</label>
                          <input type="text"
                                 class="form-control"
                                 id="capitalEdit"
                                 name="capital"
                                >
                      </div>
                      <div class="form-group">
                          <label for="codeEdit" class="col-form-label">Code</label>
                          <input type="text"
                                 class="form-control"
                                 id="codeEdit"
                                 name="code"
                                   >
                      </div>
                      <div class="form-group">
                          <label for="continentEdit" class="col-form-label">Continent</label>
                          <input type="text"
                                 class="form-control"
                                 id="continentEdit"
                                 name="continent"
                                 >
                      </div>
                      <div class="form-group">
                          <label for="nationalityEdit" class="col-form-label">Nationality</label>
                          <input type="text"
                                 class="form-control"
                                 id="nationalityEdit"
                                 name="nationality"
                         >
                      </div>
                      <div class="modal-footer">
                          <!--submit type button should be within the form to execute the query-->
                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                          <button type="submit" class="btn btn-primary">Update</button>
                      </div>
                  </form>
              </div>
          </div>
      </div>
  </div>

My controller:

@GetMapping("countries")
public String findAll(Model model){
    List<Country> listOfCountries = countryService.findAll();
    model.addAttribute("countries", listOfCountries);
    return "country";
}   

@GetMapping("countries/findById/{id}")
@ResponseBody
public Country findById(@PathVariable int id, Model mod)
{
    Country country = countryService.findById(id).get();
    //I want to create a countryToUpdate attribute to use it in the modal form
    mod.addAttribute("countryToUpdate", country);
    return country;
}

@GetMapping("countries")
public String findAll(Model model){
    List<Country> listOfCountries = countryService.findAll();
    model.addAttribute("countries", listOfCountries);
    return "country";
}   

@PostMapping(value="countries/update/{id}")
public String update(@ModelAttribute("countryToUpdate") Country country, @PathVariable int id)  {
    //Get the country object from database through the passed id
    Optional<Country> c = countryService.findById(id);

    c.get().setDescription(country.getDescription());
    c.get().setContinent(country.getContinent());
    c.get().setCode(country.getCode());
    c.get().setCapital(country.getCapital());
    c.get().setNationality(country.getNationality());

    System.out.println("this country description is " + country.getDescription());
    countryService.save(c.get());
    return "redirect:/countries";
}

Any help would be appreciated.