Is there any way to get the nearest id when an option is selected

Question

I'm now working on a rating system. I'm trying to implement this system using the select tag. So, when the user select any rate they get redirected to other route. Now, I'm dynamically create the html page. And there multiple books'IDs have the same class (which is class="book_id"). My code now redirect me to the other route but the value of "book_name" which supposed to be the id of the book that the user rated it's undefined

    <div class="row g-3">
      <!--render the books in within cards-->
      {% for book in books %}
        <div class="col-12 col-md-6 col-lg-4">

            <div style="background-color:#6e6b64" class="card">
               {% if book.volumeInfo.imageLinks.smallThumbnail %}

                 <img src="{{book.volumeInfo.imageLinks.smallThumbnail}}">
               {% endif %}

               <div  class="card-body">
               <h5 style="color:red" class="card-title">{{book.volumeInfo.title}}</h5>
               <p style="color:blue" class="card-text">{{book.volumeInfo.authors}}</p>
               <form style="margin-bottom:5px" action="/addcomment" method="get">
                  <!--<input name="book" type ="hidden" class="form-control mx-auto w-auto" id="book_id" class="book_id" value="{{book.id}}" type="text">-->
                  <a href="{{book.volumeInfo.infoLink}}" class="btn btn-primary">More Info</a>
                  <button type="submit" class="btn btn-primary">add comment</button>

                 <link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet"/>
                 <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.2/themes/fontawesome-stars-o.css" rel="stylesheet"/>
                  <!--get the user rate-->
                 <label class="custom-select">
                  Give your rate
                  <select class="custom-select" style="width:200px;" id="example">
                   <option value="1">1</option>
                   <option  value="2">2</option> <option value="3">3</option>
                   <option value="4">4</option>
                   <option value="5">5</option>
                 </select>
                  <input name="book" type ="hidden" class="form-control mx-auto w-auto" id="book_id" class="book_id" value="{{book.id}}" type="text">
                </label>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
                </script>
                <script>

                 jQuery(function(){
                  jQuery('[id=example]').on('change', function (event) {
                      let book_name =event.target.nextSibling.value;
                    //  let book_name =event.target.closest('.book_id').value;
                    //  name = book_name.closest('.book_id').value
                     console.log(book_name);
                     var rating  = $(this).val(); // get selected value
                     if (rating ) {
                         window.location = "/rate/"+book_name+"/" +rating;

                              }
                     return false;

                               });
                            });
               </script>
              </form>
                </div>
             </div>
           </div>
           {% endfor %}
       </div>
   </div>

Answer 1

All id's on the page should be unique. Currently you're having the same id value for each select and input elements. Lose these ids.

Instead the give the elements a class with a meaningful name. Like book-rating for the select and book-id for the hidden input.

<select class="book-rating custom-select">
  <option value="1">1</option>
  <option value="2">2</option> 
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
<input name="book" type="hidden" class="book-id form-control mx-auto w-auto" value="{{book.id}}" type="text">

Modify the JS by selecting all select elements with the class .book-rating and listen for the change event.

jQuery(function ($) {
  $(".book-rating").on("change", function (event) {
    const $target = $(event.target);
    const rating = $target.val(); // value of select.
    const bookId = $target.next().val(); // value of input.
    
    if (rating && bookId) {
      window.location = `/rate/${bookId}/${rating}`;
    }
  });
});