Calculating values from inputs in jQuery and Thymeleaf?

Question

When I add the selected book to the session, it will appear here. Whatever I do with JQuery, for example to multiply the number and the price, it just takes the values from the first row for one book that appeared, it doesn't recognize the others ?!

<form id="form">
    <div th:unless="${session.choosenBooksForUser.empty}" id="dataTable" >
        <ul>
            <li name="line_items" th:each="itBook: ${session.choosenBooksForUser}">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span>Name of book:<a th:href="|books/Details?id=${itBook.id}|" th:text="${itBook.name}" name="name"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span>Author:<span th:text="${itBook.author}" name="itBook.author"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span>Number of Book to Buy:<input class="numberOfBooksToBuy" type="number" value="1" min="1" id="numberOfBooksToBuy"  onkeyup="if(this.value<0){this.value= this.value * -1}" name="numberOfBooksToBuy"/></span>
                <span>Price: <input type="number"  th:value="${itBook.price}" name="price" id="price"  class="price" onkeyup="if(this.value<0){this.value= this.value * -1}" readonly/></span>
                <br>
                <br>
            </li>
        </ul>       
    </div>
</from>

Need to change the tag named NumberOfBooksToBuy

<span>Number of Book to Buy:<input oninput='saveValue(this);'  class="numberOfBooksToBuy" type="number" value="1" min="1" id="numberOfBooksToBuy"  onkeyup="if(this.value<0){this.value= this.value * -1}" name="numberOfBooksToBuy"/></span>

<script type="text/javascript">
    

 document.getElementById("numberOfBooksToBuy").value = getSavedValue("numberOfBooksToBuy");    

 function saveValue(e){
    var id = e.id; 
    var val = e.value; 
    localStorage.setItem(id, val);
}


function getSavedValue  (v){
    if (!localStorage.getItem(v)) {
        return "";
    }
    return localStorage.getItem(v);
}  

    </script>