Zombie42679

<div class="range">
  <input type="range" min="0" max="100" step="1" value="20">
  <input type="text" value="20">
</div>

const range = document.querySelector('.range [type="range"]');
const text = document.querySelector('.range [type="text"]');
range.oninput = () => text.value = range.value;
text.oninput = () => range.value = text.value;

// или

document.querySelector('.range').addEventListener('input', e => {
  e.currentTarget.querySelectorAll('input').forEach(n => n.value = e.target.value);
});

// или

const inputs = document.querySelectorAll('.range input');
const onInput = e => inputs.forEach(n => n.value = e.target.value);
inputs.forEach(n => n.addEventListener('input', onInput));

.circle {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 1px solid #000;
}

.low-circle {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1px solid red;
  margin: 5px;
}

Обратите внимание, что размер внутреннего круга изменен, везде должны получаться целые числа, иначе при округлении все сместится на 1px.
Т.е. должно быть a + 2*border + 2*margin = b, где a - размер внутреннего круга, а b - внешнего.

Скорее всего, на момент отработки скрипта DOM еще не построен до конца.
Оберните свой скрипт в

$( function () {
// Здесь сам скрипт
} );

id - уникальный идентификатор элемента, больше одного на странице быть не должно, используйте класс элемента - <span class="delete_me">Удалить</span> и соответствующий селектор $('.delete_me').
Далее, новосозданные элементы не существовали на момент создания листенеров, соответственно не будут откликаться на вызов по клику, привязывать надо на document, и затем отслеживать нажатие на нужный класс:

$document.on('click', '.delete_me', function(){
    doStuff();
})

И обращаться надо не к div, а к $(this), элементу сработавшему на листенер(читайте про контекст событий).
https://jsfiddle.net/Luaoq64v/
И не надо использовать такую смесь чистого жс и жк, и в голове каша и в коде.

Аттрибут id у элемента должен быть уникальным на всей странице, используйте class. Чтобы удалить тот элемент, на который вы кликаете нужно использовать this.

slidesPerView?

Немного поправил ваш код:

.arrow {
  position: relative;
}

.arrow::before {
  content: '';
  display: block;
  width:  650px;
  height: 600px;
  background: blue;
}

.arrow::after {
  content: '';
  display: block;
  position: absolute;
  top:  0;
  left: 0;
  width:  600px;
  height: 400px;
  background: url(http://cliparting.com/wp-content/uploads/2016/05/Arrow-clipart-arrow-graphics-clipartcow-2.png);
}

статья - www.xiper.net/collect/js-plugins/ui/jquery-ui-slider
пример - www.xiper.net/examples/js-plugins/ui/ui-slider

Я думаю вам отлично подойдет API Яндекс карт, у них есть возможность использования и построения собственных карт в отрыве от земной поверхности.
А дальше в базе данных будете хранить id значков, id и координаты объектов, ну и прочие параметры.
Общий смысл работы такой же, как и с обычными яндекс картами.

после клика вместо $("ul li") пишите $(this) и далее от него пляшете типа
$(this).find(".popup") и так далее

https://codepen.io/anon/pen/GvMWYV?editors=0010

У вас клик по крестику обрабатывается дважды, и как клик по самому крестику и как клик по li (крестик же внутри li)

event.stopPropagation() - обрывает цепочку всплытия события.

https://codepen.io/anon/pen/QMqdrP?editors=0010