当我将所选书籍添加到会话时，它将出现在此处。不管我用jquery做什么，比如把数字和价格相乘，它只取出现的一本书的第一行的值，它不识别其他的？！

<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>

需要更改名为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>