HTML: getting selected datalist option value, and innerHTML, without using Jquerys

I have a situation where I want to let a user decide titles of books that I have on my db, using an input with a datalist (generated by php), after the user picked a title, he would click a submit button and the form would send the title in another file.

Everything worked fine but I didn’t realized that I needed to send the ID of the book that the user selected, because there can be more than one book with the same title.

What I would like to have is the option of the datalist, that no longer has the title of the book inside its “value” attribute, but I want that title inside its innerHTML, so that the title gets displayed, while having the ID inside the “value” attribute. My problem is that if I do that, when the user clicks on the datalist option, the ID gets inside the text input, so the user may not know what book he choose.

summing up: I would like to have the datalist that displays the title, when an option is chosen, that title gets displayed in the text input, when I submit, the Id of the book gets sent in “FindBook.php” inside $_POST.

isIn() checks if the title is inside the array of titles, I would need to change that so that it can check if the ID is inside the array of IDs.

before


   <form onsubmit="return isIn(document.getElementById('book').value);" action="FindBook.php" target="_blank" method="POST">
      <input id="libro" name="bookTitle" list="books" autocomplete="off" style="width: 200px;">
      <input type="submit" value="Find Book">
    </form>
...
   <datalist id="books">
    <? foreach ($books as $row) { ?>
      <option value="<? echo $row["title"]; ?>"></option>
    <? }; ?>
  </datalist>


after

   <form onsubmit="return isIn(*id of the book*);" action="FindBook.php" target="_blank" method="POST">
      <input id="libro" name="bookTitle" list="books" autocomplete="off" style="width: 200px;">
      <input type="submit" value="Find Book">
    </form>
...
  <datalist id="books">
    <? foreach ($books as $row) { ?>
      <option value="<? echo $row["id"]; ?>"><? echo $row["title"]; ?></option>
    <? }; ?>
  </datalist>


Since I don’t understand JQuerys i would really prefer a solution that doesn’t imply that.
Sorry for my bad english, let me know if I need to clarify something.