Call a Java SpringBoot server method from a JavaScript script on a website

I'm working on a submenu on my website, that has 5 options, each of them is name of a game. When user selects an option, I want my server to print a name of the game, that user selected. Here i have two problems:<br>

1. I don't know why after click on a submenu option, I always get the
   first game name. <br>
2. I don't know how to send a request from a JS to my Spring Boot application, which is a server. <br>
   Can you help me? Here is my code:

<ul class="collapse list-unstyled" id="selectGameSubmenu">
    <li data-option="League of Legends">
        <a href="#"><img src="../../../static/images/league_of_legends/leagueoflegends_icon.png"
                         alt="" style="width:16px;height:16px"> League of Legends</a>
    </li>
    <li data-option="Teamfight Tactics">
        <a href="#"><img src="../../../static/images/teamfight_tactics/teamfighttactics_icon.png"
                         alt="" style="width:16px;height:16px"> Teamfight Tactics</a>
    </li>
    <li data-option="Legends of Runterra">
        <a href="#"><img src="../../../static/images/legends_of_runterra/legendsofruneterra_icon.png"
                         alt="" style="width:16px;height:16px"> Leagends of Runterra</a>
    </li>
    <li data-option="Valorant">
        <a href="#"><img src="../../../static/images/valorant/valorant_icon.png"
                         alt="" style="width:16px;height:16px"> Valorant</a>
    </li>
    <li data-option="Counter Strike">
        <a href="#"><img src="../../../static/images/counter_strike/counterstrike_icon.png"
                         alt="" style="width:16px;height:16px"> Counter Strike</a>
    </li>
</ul>

$("#selectGameSubmenu").click(function(e){
    e.preventDefault();
    var option = $("#selectGameSubmenu li").data("option");
    console.log(option);
});

@PostMapping("/change-game")
public String changeGame(@RequestParam String game){
    System.out.println("Selected option: " + game);
    return "index";
}

Your first problem lies under your click event listener. So whenever you click on your ul elements it will trigger but as you define such a selector $("#selectGameSubmenu li") it will always return your first child of ul which is League of Legends.

To fix it you should modify it a bit. First of all, instead of adding event listener in your ul you should add an event listener in your li and then get the specific clicked item by using $(this), the output should be something like this:

$("li").click(function (e) {
  e.preventDefault();
  var option = $(this).data('option');
  console.log(option);
});

Your second problem is simple, for communicating between your backend and frontend application you should use something like ajax. An ajax request will help to retrieve and send data between applications. For more information about it, you can read either of these articles: JQuery documentation, Site point, or Free code camp.

Your request will be something like this:

$.ajax({
  type: "POST",
  url: url, // Your end point address 
  data: data, // Your data
  success: success // Your actions after data send successfully 
});