Jquery commands don't work when inserting elements using indexeddb

Question

My jquery script is working fine when it's in html tag element, but on my website i had to use a databases to save the information of book like title,author, published year and also and the main thing is pages readed and total pages, i wanted to use a jquery commands to get percentage of the readed / total pages, also the value of percentage should be shown as a progress bar, i tried hard to make it but I noticed that my jquey script is working fine within tag element but on the other hand, and the most important part, without which I can do nothing it's when i try to extract the html elements and databases by indexeddb, the function of calculation it's doesn't work at all-> calculate()!, so is there any thing did i forget to add it to my code, or maybe there is somthing i need to add to make the elements load before jquery script does. please help I got stuck with this problem 10 hours ago and I don't have much left also i want to say: i put some comments at some functions and at the last function too where the main thing is. I appreciate your reading of the question and everything.

$(document).ready(function() {
  $('#pointspossible').on('input', function() {
    calculate();
  });
  $('#pointsgiven').on('input', function() {
    calculate();
  });

  function calculate() {
    var pPos = parseInt($('#pointspossible').val());
    var pEarned = parseInt($('#pointsgiven').val());
    var perc = "";
    if (isNaN(pPos) || isNaN(pEarned)) {
      perc = " ";
      updateProgressBar(myProgressBar, 0);
    } else {
      perc = ((pEarned / pPos) * 100).toFixed(0);
      updateProgressBar(myProgressBar, perc)
    }
    $('#pointsperc').val(perc);
  }

  //Open Database
  var request = indexedDB.open('bookmanager', 1);

  request.onupgradeneeded = function(e) {
    var db = e.target.result;

    if (!db.objectStoreNames.contains('customers')) {
      var os = db.createObjectStore('customers', {
        keyPath: "id",
        autoIncrement: true
      });
      //Create Index for Name
      os.createIndex('title', 'title', {
        unique: false
      });
    }
  }

  //Success
  request.onsuccess = function(e) {
    console.log('Database working Success');
    db = e.target.result;
    //Show Customers
    showCustomers();
  }

  //Error
  request.onerror = function(e) {
    console.log('Error: Opening Database!');
  }
});

function updateProgressBar(progressBar, value) {
  value = Math.round(value);
  progressBar.querySelector(".progress__fill").style.width = `${value}%`;
  progressBar.querySelector(".progress__text").textContent = `${value}%`;
}

const myProgressBar = document.querySelector(".progress");

/* Example */
updateProgressBar(myProgressBar, 10);

//Add Customer
function addCustomer() {
  var title = $('#title').val();
  var author = $('#authorInput').val();
  var published = $('#publishedYear').val();
  var pagesR = $('#pagesRead').val();
  var pagesE = $('#allPages').val();
  var startD = $('#startDate').val();
  var endD = $('#endDate').val();
  var img = $('#img').val();

  var transaction = db.transaction(["customers"], "readwrite");
  //Ask for ObjectStore
  var store = transaction.objectStore("customers");

  //Define Customer
  var customer = {
    title: title,
    author: author,
    published: published,
    pagesR: pagesR,
    pagesE: pagesE,
    startD: startD,
    endD: endD,
    img: img
  }

  //Perform the Add
  var request = store.add(customer);

  //Success
  request.onsuccess = function(e) {
    window.location.href = "/index.html";
  }

  //Error
  request.onerror = function(e) {
    alert("Sorry, the customer was not added");
    console.log('Error', e.target.error.title);
  }

}

//Display Customer
function showCustomers(e) {
  var transaction = db.transaction(["customers"], "readonly");
  //Ask for ObjectStore
  var store = transaction.objectStore("customers");
  var index = store.index('title');
  var output = '';
  index.openCursor().onsuccess = function(e) {


    var cursor = e.target.result;
    if (cursor) {

      output += "<li class='list-group-item list-group-item-action list-group-item-light'>";

      //here it's insert the elements fine but the functions of jquery that attached 
      //to these class names doesnt's work so make the progress bar useless!
      output += "<input type='text' id='pointspossible' value='100' />";
      output += "<input type='text' id='pointsgiven' value='80' />";
      output += "<input type='text' id='pointsperc' disabled/>";

      output += "<div class='progress'>";
      output += "<div class='progress__fill'></div>";
      output += "<span class='progress__text'>10%</span>";
      output += "</div>";

      output += "<img src='" + cursor.value.img + "' width='100px' height='120px'>";
      output += "<h3>" + cursor.value.title + "</h3>";
      output += "<a href='#' class='book-author'>" + cursor.value.author + "</a>";
      output += "<br>"
      output += "<a href='#' class='published'>" + cursor.value.published + "</a>";
      //output += "<p class='pages pagesS'>"+cursor.value.pagesR+"</p>"; 
      //output += "<p class='pages pagesE'>"+cursor.value.pagesE+"</p>";
      output += "<br>";
      output += "<p class='pages'>" + cursor.value.pagesR + " / " + cursor.value.pagesE + "</p>";
      output += "<br>";
      output += "<p class='date'>" + cursor.value.startD + " - " + cursor.value.endD + "</p>";

      //output += "<p class='date dateS'>"+cursor.value.startD+"</p>";
      //output += "<p class='date dateE'>"+cursor.value.endD+"</p>";
      output += "<button class='button-first'>Редактировать</button>";
      output += "<button class='button-second'>Удалить</button>";
      output += "</li>";

      cursor.continue();
    }
    $('.list-group').html(output);
  }
}