How do I insert an additional JS script for each element in an array using jQuery?

Question

I'm trying to add a "Book Preview" button using the Google Embedded Viewer API. I want to add the button to each book result the user gets. When I add the script to the list using .append , the script erases everything and when the I submit a search query everything disappears and I only see the preview button.

I tried putting the <script> part in the HTML file, but when I did that the function appeared as plain text. I also tried putting the script in a separate file and using $.getScript , but that isn't doing anything. I also tried appending the script to a separate div, but that didn't work either. When I put the script directly in the HTML file, it doesn't erase everything but also doesn't work with the array data.

main JS file:

function displayResults(responseJson, maxResults) {

    console.log(`displayResults ran`);
    console.log(responseJson);
    $('#results-list').empty();

    for (let i = 0; i < responseJson.items.length & i < maxResults; i++){


        $('#results-list').append(
            `
          <li>
          <p>${responseJson.items[i].volumeInfo.industryIdentifiers[1].identifier}</p>
          <img src="${responseJson.items[i].volumeInfo.imageLinks.thumbnail} alt="The book">
          <h3>${responseJson.items[i].volumeInfo.title}</h3>
          <h2>${responseJson.items[i].volumeInfo.authors}</h2>
          <p>${responseJson.items[i].volumeInfo.description}</p>

          <a href="${responseJson.items[i].saleInfo.buyLink}">Buy this Book</a>

          <div></div>

          <input type="submit" class="preview-button" id="book-preview" value="Preview This Book">
          </li>
          `);
         $.getScript("book-viewer-index.js")

        };


      $('#search-results').removeClass('hidden');
};

linked file/button code:

 <div>
    <script type="text/javascript" 
      src="https://books.google.com/books/previewlib.js"></script>
    <script type="text/javascript">
      GBS_insertPreviewButtonPopup('ISBN:0738531367');
    </script>
    })
 </div>

The expected result is a button under each book search result that will display the hard-coded book preview. There is currently no actual result. I added in the "preview book" button in case I have to do it that way but that's not actually how I want it.

Answer 1

https://books.google.com/books/previewlib.js only needs to be included once before your loop starts.

You just need to call GBS_insertPreviewButtonPopup for each element you create in the loop, you don't need to inject a script block into the html to call it.

Straight after you call the append to the results-list you can call the GBS_insertPreviewButtonPopup in your loop.