Вставьте строку из текстового поля в качестве элементов массива и дайте им значения из слайдера

#javascript #html #jquery #css

Вопрос:

Мне нужно вставить строковые значения из текстового поля и передать им значения из слайдера, и значение должно быть сохранено в строковых элементах, и все это должно выглядеть следующим образом: Как это должно выглядеть

**

 let names = []; let nameInput = document.getElementById("name"); let messageBox = document.getElementById("display"); var slider = document.getElementById("myRange"); var output = document.getElementById("demo");  output.innerHTML = slider.value;  slider.oninput = function() {  output.innerHTML = this.value; }  function insert() {  names.push(nameInput.value);  clearAndShow();  }  function remove() {  var element = document.getElementById("display");  element.parentNode.removeChild(element); }  function clearAndShow() {  let printd = ""  nameInput.value = "";  messageBox.innerHTML = "";  names.forEach(function(element) {  if (element != '') {   var _span = document.createElement('span');   _span.style.borderStyle = "solid"  _span.style.borderColor = "blue"  _span.style.width = '50px'  _span.style.marginLeft = "5px"   _span.appendChild(document.createTextNode(element))  messageBox.appendChild(_span)   printd  = "''"   element   "''"   ","   " ";   document.getElementById("labelprint").innerHTML = (printd)   }  }) } 
 h3 {  color: rgb(0, 174, 255); }  .container {  border: solid 2px;  display: block;  margin-left: 200px;  margin-right: 200px;  margin-top: 50px; }  .slider {  display: none; }  .demospan {  display: none; }  .display:hover .slider {  display: block;  color: red; } 
 lt;div class="container"gt;  lt;formgt;  lt;h1gt;Enter Searchlt;/h1gt;  lt;input id="name" type="text" /gt;  lt;input type="button" value="Search" onclick="insert()" /gt;   lt;/formgt;  lt;br/gt;   lt;div onclick="remove(this)" id="display"gt;lt;/divgt;   lt;input type="range" min="1" max="100" value="1" class="slider" id="myRange"gt;  lt;span class="demospan" id="demo"gt;lt;/spangt;   lt;br/gt;  lt;br/gt;  lt;labelgt;You have Selected: lt;/labelgt;  lt;h3 id="labelprint"gt;lt;/h3gt; lt;/divgt; 

**

Что я не знаю, как сделать, так это как удалить элементы по отдельности и добавить значение для каждого элемента, вставленного с помощью ползунка. Нужно ли мне полностью изменить свой подход или небольшие изменения в моем коде могут обеспечить необходимые функциональные возможности.