title: Cannot get button to change in Spring Boot App (i.e. from "Add to Cart" to "Remove")
body: <p>I have an app where users can add items to their cart. Their cart is persisted with Spring Data JPA and saved on a MySQL DB. Anyway, I would like the "Add to Cart" text to be changed to "Remove", and then vice versa, when the button is clicked again.</p>
  
  <p>I have tried different methods, such as using regular JS and trying to change the innerHTML, as well as some JQuery methods I've found here, but I can't seem to get it to change. The code that is currently inside the script in my index.html file is just one example of the code I've tried.</p>
  
  <p>Also, just to be clear, the add to cart is working. It's just not changing when clicked.</p>
  
  <p>Thanks for looking.</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorate="~{fragments/main_layout}"&gt;
  
  &lt;head th:replace="fragments :: head"&gt;&lt;/head&gt;
  &lt;body&gt;
  
  &lt;nav th:replace="fragments :: navigation"&gt;&lt;/nav&gt;
  
  &lt;h1 th:text="${title}" class="display-5"&gt;Add Cheeses&lt;/h1&gt;
  
  &lt;p th:unless = "${cheeses} and ${cheeses.size()}"&gt;No Items&lt;/p&gt;
  
  &lt;table class="table"&gt;
  
      &lt;tr&gt;
  
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Description&lt;/th&gt;
          &lt;th&gt;Category&lt;/th&gt;
          &lt;th&gt;Price&lt;/th&gt;
          &lt;th&gt;&lt;/th&gt;
      &lt;/tr&gt;
  
      &lt;tr th:each ="cheese : ${cheeses}"&gt;
  
          &lt;td th:text ="${cheese.name}"&gt;&lt;/td&gt;
          &lt;td th:text ="${cheese.description}"&gt;&lt;/td&gt;
          &lt;td th:text="${cheese.type}"&gt;&lt;/td&gt;
          &lt;td th:text ="${cheese.price}"&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;form method="post"&gt;
                  &lt;button type="submit" id="changeBtn" onclick="myFunction()" class="btn btn-success btn-sm" name = "cheeseId" th:value="${cheese.id}" th:id="${cheese.id}"&gt;Add to Cart&lt;/button&gt;
              &lt;/form&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  
      function myFunction() {
          if (document.getElementById("changeBtn").innerHTML == "Add to Cart") {
              document.getElementById("changeBtn").innerHTML = "Remove";
          }
          else document.getElementById("changeBtn").innerHTML = "Add to Cart";
      }
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>fragments.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"  xmlns:th="http://www.thymeleaf.org"
        xmlns:sec="http://www.thymeleaf.org/extras/spring-security"&gt;
  &lt;head th:fragment="head"&gt;
      &lt;meta charset="UTF-8"/&gt;
      &lt;title th:text = "${title}"&gt;&lt;/title&gt;
  
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.1.1/materia/bootstrap.min.css"&gt;
  
      &lt;script th:src="@{webjars/jquery/jquery.min.js}"&gt;&lt;/script&gt;
      &lt;script th:src="@{webjars/jquery/bootstrap.min.js}"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;nav class="navbar navbar-expand-lg navbar-dark bg-primary" th:fragment="navigation"&gt;
      &lt;a class="navbar-brand" href="#"&gt;Shop&lt;/a&gt;
      &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation"&gt;
          &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
      &lt;/button&gt;
  
      &lt;div class="collapse navbar-collapse" id="navbarColor01"&gt;
          &lt;ul class="navbar-nav mr-auto"&gt;
              &lt;li class="nav-item active" sec:authorize="isAuthenticated()"&gt;
                  &lt;a class="nav-link" href="/cheese"&gt;List&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item" sec:authorize="isAuthenticated()"&gt;
                  &lt;a class="nav-link" href="/cheese/add"&gt;Add&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item" sec:authorize="isAuthenticated()"&gt;
                  &lt;a class="nav-link" href="/cheese/remove"&gt;Remove&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="navbar-right" sec:authorize="isAuthenticated()"&gt;
                  &lt;a class="nav-link" href="/cheese/account"&gt;Account&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="navbar-right" sec:authorize="!isAuthenticated()"&gt;
                  &lt;a class="nav-link" href="/cheese/login"&gt;Login&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="navbar-right" sec:authorize="!isAuthenticated()"&gt;
                  &lt;a class="nav-link" href="/cheese/signup"&gt;Signup&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;form class="form-inline my-2 my-lg-0" th:action="@{/logout}" method="post" sec:authorize="isAuthenticated()"&gt;
              &lt;input class="form-control mr-sm-2" type="hidden" /&gt;
              &lt;button class="btn btn-secondary my-2 my-sm-0" type="submit"&gt;Logout&lt;/button&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  &lt;body&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>