如何使用javascript在每个div上附加进度条？

Question

在这里，我有一个网页，其中有很多div。

所有div都具有相同的ID。但是有不同的类型。

就像第一个div有type =“timeline”而另一个是type =“slideshow”。

当我滚动我的type = timelime div时，我的进度条显示在顶部。它工作得很好，但它只在一个div上附加我的进度条。我的进度条仅适用于类型等于时间轴的情况。

我该怎么做才能解决此错误？

当时间轴滚动时，进度条会一切正常，但我不知道为什么它不会附加所有类型=时间轴的进度条。

像我一样，我有幻灯片。我有三张幻灯片，只有第三张幻灯片正常工作。

这是我的代码。

function isOnScreen(that){
	var win = $(window);
	var viewport = {
	  top : win.scrollTop(),
	  left : win.scrollLeft()
	};
	viewport.right = viewport.left + win.width();
	viewport.bottom = viewport.top + win.height();
	var bounds = that.offset();
	bounds.right = bounds.left + that.outerWidth();
	bounds.bottom = bounds.top + that.outerHeight();
	return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
   }
   
  	$(window).scroll(function() {
		if(isOnScreen($("#slide"))) {
			$("#progressbar").show();
			$(window).scroll(function() {
				if(isOnScreen($("#slide"))) {
					$("#progressbar").show();
					var scroll        = $(this).scrollTop();
					var height        =$('#slide').position().top;
					var percent       = (scroll- height) / 100;
			
					$("#progressbar").attr('value', parseInt(percent*6));
				} 
			});
		} else {
			$("#progressbar").hide();
		}   
	});

	var para = document.createElement("Progress");
	para.setAttribute('id', 'progressbar');
	para.setAttribute('value', 0);
	para.setAttribute('max', 100);
	// document.getElementById("slide").appendChild(para);
	
	$("[type=timeline]").addClass('timelineClass');
	let selectSection = document.querySelectorAll(".timelineClass");
	let selectLength = selectSection.length;

	for(i = 0;i < selectLength; i++){
		let data = selectSection[i].getAttribute('type');
		if(data=='timeline') {
			console.log("inside")
			selectSection[i].appendChild(para);
		}
	}
	
	var divSlide = document.querySelectorAll('#slide');
	var myNodeList = divSlide.length;
	for(var i = 0; i < myNodeList; i++) {
		var type = divSlide[i].getAttribute("type");
		if (type == "timeline") {
		
		} else if (type == "slideshow") {
			var timeline = divSlide[i];         
			let sliderData = timeline.getElementsByTagName("section");
			timeline.insertAdjacentHTML("afterbegin",'<a class="left  color_arrow carousel-control" href="#myCarousel" onclick = "plusDivs(-1, timeline)" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous</span></a>');

			timeline.insertAdjacentHTML('afterbegin',' <a class="right color_arrows  carousel-control" href="#myCarousel"  onclick = "plusDivs(1, timeline)" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next</span></a>');

			var slideIndex = 1;
			showDivs(slideIndex, timeline);
		}
	}
	function plusDivs(sliderItem, el) {
		showDivs(slideIndex += sliderItem, el, sliderItem);
	}

	function showDivs(sliderItem, el , dir) {

		let i;
		let sliderData = el.getElementsByTagName("section");
	
		if (sliderItem > sliderData.length) {slideIndex = 1}    
		if (sliderItem < 1) {slideIndex = sliderData.length}

		for (i = 0; i < sliderData.length; i++) {
			sliderData[i].classList.add('hide')
			sliderData[i].classList.remove('active')  
			sliderData[i].classList.remove('animated')  
			sliderData[i].classList.remove('fadeInRight')  
		}

		sliderData[slideIndex-1].classList.remove('hide')
		sliderData[slideIndex-1].classList.add('active')
		sliderData[slideIndex-1].classList.add('animated')
		if(dir === 1)
			sliderData[slideIndex-1].classList.add('fadeInLeft')
		else if(dir === -1)
			sliderData[slideIndex-1].classList.add('fadeInRight')
	}

<
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div type="timeline" id="slide">
  <section>
    <header>Title one</header>
    <article>Some data</article>
  </section>
   <section>
    <header>Title one</header>
    <article>Some data</article>
  </section>
</div>
<div type="timeline" id="slide">
  <section>
    <header>Title one</header>
    <article>Some data</article>
  </section>
   <section>
    <header>Title one</header>
    <article>Some data</article>
  </section>
</div>
<div type="timeline" id="slide">
  <section>
    <header>Title one</header>
    <article>Some data</article>
  </section>
   <section>
    <header>Title one</header>
    <article>Some data</article>
  </section>
</div>
<div type="timeline" id="slide">
  <section>
    <header>Title one</header>
    <article>Some data</article>
  </section>
   <section>
    <header>Title one</header>
    <article>Some data</article>
  </section>
</div>

<div type="slideshow" id="slide">
  <section>
    <header>Title one</header>
    <article>Some data</article>
  </section>
   <section>
    <header>Title one</header>
    <article>Some data</article>
  </section>
</div>
<div type="slideshow" id="slide">
  <section>
    <header>Title one</header>
    <article>Some data</article>
  </section>
   <section>
    <header>Title one</header>
    <article>Some data</article>
  </section>
</div>