Изменить код переменной кнопки в полноэкранном модальном окне при каждой прокрутке

Question

При щелчке по миниатюре она загружается в модальное окно. Теперь я пытаюсь добавить кнопки категорий в каждое модальное окно. Здесь я застрял с кодом.

Вы можете увидеть это здесь http://www.garryjones.se/phototest/

При нажатии кнопки на странице эскизов он отправляет два входных значения формы на ajax код, который меняет категорию в реальном времени. Теперь я пытаюсь отразить это в каждом полноэкранном модальном окне.

Любая помощь действительно оценена.

Это код ...

// part 1
var images = {};

function populateImages() {
  var image = {
    CLASS: "myImg",
    ID: "myImg1",
    SRC: "./thumbnails/tn1.jpg",
    STYLE: "width:100%;max-width:300px",
    ONCLICK: "myFunctionElt(this.id);"
  };
  images[image.ID] = image;
  image = {
    CLASS: "myImg",
    ID: "myImg2",
    SRC: "./thumbnails/tn2.jpg",
    STYLE: "width:100%;max-width:300px",
    ONCLICK: "myFunctionElt(this.id);"
  };
  images[image.ID] = image;
  image = {
    CLASS: "myImg",
    ID: "myImg3",
    SRC: "./thumbnails/tn3.jpg",
    STYLE: "width:100%;max-width:300px",
    ONCLICK: "myFunctionElt(this.id);"
  };
  images[image.ID] = image;
}
populateImages();
// part 2
var excludedIDArray = [];

function populateExcludedIDs() {
  excludedIDArray.push('myImg51');
  excludedIDArray.push('myImg52');
  excludedIDArray.push('myImgWhatever');
}
populateExcludedIDs();
// part 3
var imageIDArray = Object.keys(images);
var thumbnailArray = imageIDArray.filter(function(id) {
  return !excludedIDArray.includes(id);
});

// part 4
var modalImageIndex = 0;

function myFunctionElt(eltID) {
  modalImageIndex = thumbnailArray.indexOf(eltID);
  var span = document.getElementsByClassName("close")[0];
  span.onclick = function() {
    modal.style.display = "none";
  }
  var strID = document.getElementById(eltID);
  var modal = document.getElementById("myModal");
  var modalImg = document.getElementById("img01");
  modal.style.display = "block";
  var str = strID.src;
  var str1 = "./mypix/";
  var str2 = str.substr(str.length - 5);
  var res = str1.concat(str2);
  modalImg.src = res;
}
// part 5
function shiftImage(direction) {
  switch (direction) {
    case 'PREVIOUS':
      if (modalImageIndex == 0) {
        modalImageIndex = thumbnailArray.length;
      }
      modalImageIndex--;
      break;
    case 'NEXT':
      modalImageIndex++;
      modalImageIndex = modalImageIndex % thumbnailArray.length;
      break;
    default:
      break;
  }
  myFunctionElt(thumbnailArray[modalImageIndex]);
}

// Ajax Code
$(function() {
  $('form').on('click', 'input[type="submit"]', function(e) {
    if ($(this).val() == 'Delete') {
      if (confirm("Are you really sure you want to delete this photo?")) {
        doAjax($(this));
      }
    } else {
      doAjax($(this));
    }
    e.preventDefault();
  });

  function doAjax(that) {
    $.ajax({
      type: 'post',
      url: "ajax_update_code.php",
      data: $(that).parent().serialize(),
    });
    var clicked = that,
      imageName = clicked.data("image");
    newValue = "B" + imageName;
    document.getElementById(newValue).innerHTML = ". Changed";
    clicked.removeClass("c_off").addClass("c_on");
    $('input[type="submit"]').each(function() {
      var self = $(this);
      if (!clicked.is(self)) {
        if (self.hasClass("c_on") && imageName == self.data("image"))
          self.removeClass("c_on").addClass("c_off");
      }
    });
  }
});

body {
  font-family: Arial, Helvetica, sans-serif;
}

.myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.5s;
}

.myImg:hover {
  opacity: 0.7;
}


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 0px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/ opacity */
}


/* Modal Content (image) */

.modal-content {
  margin: auto;
  display: block;
  width: 100%;
  max-width: 1500px;
}


/* Add Animation */

.modal-content {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0)
  }
  to {
    -webkit-transform: scale(1)
  }
}

@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}

.close {
  position: absolute;
  top: -20px;
  right: 0px;
  color: #f1f1f1;
  font-size: 70px;
  font-weight: bold;
  transition: 0.5s;
  width: 70px;
  height: 70px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}

.close:hover {
  background: #060;
}

@media only screen and (max-width: 700px) {
  .modal-content {
    width: 100%;
    max-width: 700px;
  }
}


/*
    Arrow buttons hit area
*/

.buttonleft {
  display: block;
  border: 0;
  background: none;
  top: 50%;
  margin-top: -50px;
  width: 70px;
  height: 70px;
  position: absolute;
  left: 0;
  cursor: pointer;
}

.buttonleft {
  display: block;
  border: 0;
  background: none;
  top: 50%;
  margin-top: -50px;
  width: 70px;
  height: 70px;
  position: absolute;
  left: 0;
  cursor: pointer;
}

.buttonleft:hover {
  background: #060;
}

.buttonright:hover {
  background: #060;
}

.buttonright {
  display: block;
  border: 0;
  background: none;
  top: 50%;
  margin-top: -50px;
  width: 70px;
  height: 70px;
  position: absolute;
  right: 0;
  cursor: pointer;
}


/* For the Ajax bit with updating live */

.c_on {
  background-color: #006600;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  border: 5px inset #FF0;
  border-radius: 22px;
  outline: none;
  width: 96px;
  height: 30px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

.c_off {
  color: #fff;
  font-weight: normal;
  background-color: #CC0000;
  cursor: pointer;
  border: 5px outset #FFC;
  border-radius: 22px;
  outline: none;
  width: 96px;
  height: 26px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.c_on:hover {
  color: #FF0;
  font-weight: bold;
}

.c_off:hover {
  color: #FF0;
  font-weight: bold;
}

.shwupd {
  border: thick #F00;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  color: #009;
  text-align: center;
  background-color: #FC6;
  vertical-align: bottom;
}

hr {
  border: none;
  height: 20px;
  width: 90%;
  height: 50px;
  margin-top: 0;
  border-bottom: 1px solid #1f1209;
  box-shadow: 0 20px 20px -20px #333;
  margin: -50px auto 10px;
}


/* Grade Buttons */

.grade1 {
  position: absolute;
  /* Stay in place */
  z-index: 2;
  /* Sit on top  */
  left: 5%;
  top: 5%;
  text-align: center;
  width: 100px;
  /*Full width  */
  height: 30px;
  /* Full height  */
}

.grade2 {
  position: absolute;
  /*Stay in place  */
  z-index: 2;
  /* Sit on top  */
  left: 5%;
  top: 10%;
  text-align: center;
  width: 100px;
  /*Full width  */
  height: 30px;
  /* Full height  */
}

.grade3 {
  position: absolute;
  /*Stay in place  */
  z-index: 2;
  /* Sit on top  */
  left: 5%;
  top: 15%;
  text-align: center;
  width: 100px;
  /*Full width  */
  height: 30px;
  /* Full height  */
}

.grade4 {
  position: absolute;
  /*Stay in place  */
  z-index: 2;
  /* Sit on top  */
  left: 5%;
  top: 20%;
  text-align: center;
  width: 100px;
  /*Full width  */
  height: 30px;
  /* Full height  */
}

.grade5 {
  position: absolute;
  /*Stay in place  */
  z-index: 2;
  /* Sit on top  */
  left: 5%;
  top: 25%;
  text-align: center;
  width: 100px;
  /*Full width  */
  height: 30px;
  /* Full height  */
}