Степан Крапивин

обернуть слово

КАРТА

в тег span и с помощью медиазапросов скрывать на мобильных разрешениях экрана

смотри в сторону роутера.
Есть полно готовых роутеров на JS, есть статьи где описано как написать свой роутер

htmlbook.ru/html/attr/contenteditable

гугли js before-after image comparsion
egegorgulu.com/works/beforeafterjs
https://ourcodeworld.com/articles/read/263/top-5-b...

Этот редактор назывался Scratchpad. И его убрали начиная с версии 72

как альтернативу разработчики предлагают использовать "многострочный режим" в консоли

С помощью splice

let characters = [
  'Люк Скайуокер',
  'Оби Ван',
  'Чубакка',
  'Энакин Скайуокер',
  'Хан Соло',
  'Палпатин'
];

const enakinIndex = characters.indexOf('Энакин Скайуокер')

characters.splice(enakinIndex, 1, 'Дарт Вейдер')

потому что

var span = document.getElementsByClassName("close");

возвращает HTMLCollection, т.е. не один элемент а список элементов.

А дальше идёт навешивание обработчика клика как для единственного элемента:

span.onclick = function() {
  modal.style.display = "none";
}

нужно сначала взять элемент из HTMLCollection и на него уже навешивать обработчик

span[0].onclick = function() {
  modal.style.display = "none";
}

или в цикле обходить все элементы HTMLCollection и на каждый навешивать обработчик

Сделай это стилями и в коде добавляй только класс для блока.

.wish {
  background: url(/Templates/Shopnz/images/wishcustom-hover.png) no-repeat center center;
}
.no-wish {
  background: url(/Templates/Shopnz/images/wishcustom.png) no-repeat center center;
}

if($(".wishlist-header-block-count").text() > 0){
  $(".cart-mini-wishlist-img").removeClass("no-wish");
  $(".cart-mini-wishlist-img").addClass("wish");
} else {
  $(".cart-mini-wishlist-img").removeClass("wish");
  $(".cart-mini-wishlist-img").addClass("no-wish");
}
// и так далее...

https://codepen.io/ARS/pen/pjypwd
https://codepen.io/venera/pen/rYbaPQ
william.hoza.us/text/?t=Xevin

С помощью слотов. На сайте vue есть даже пример