为什么我的进度条仅使用javascript附加到最后一个div？

Question

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

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

就像第一个div有类型=＆＃34;时间线＆＃34;和其他类型=＆＃34;幻灯片＆＃34;。

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

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

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

这是我的代码。

＆＃13;

＆＃13;

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')
	}

＆＃13;

div[type="timeline/slideshow"] > section , div[type="timeline"] > section  {
	margin: auto;
	width: 900px;
	z-index: 100;
	opacity: 0.5;
	border-left: 4px solid #00BCD4;
	border-top: 1px solid grey;
	min-height:250px;
	background-color: #b3e5fc2b;
	border-radius: 4px;
	margin-bottom: 55px;
	position: relative;
	top: 50px;
	box-shadow: rgb(136, 136, 136) 3px 3px 1px;
	-webkit-animation: fadein 2s;
	-moz-animation: fadein 2s; 
	-ms-animation: fadein 2s;
	-o-animation: fadein 2s; 
	animation: fadein 2s;
}

div[type="timeline/slideshow"] > section:hover , div[type="timeline"] > section:hover {
	opacity:1;
} 

div[type="timeline/slideshow"]::before , div[type="timeline"]::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: .2rem;
	background: white;
	height: 55px;
}

div[type="timeline/slideshow"]>section::after, div[type="timeline"]>section::after  {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -81px;
	width: .2rem;
	background: grey;
	height: 79px;
}
div[type="timeline/slideshow"] > section> header , div[type="timeline"] > section> header  {
	font-weight: 600;
	color: cadetblue;
	transform: translate(16px, 23px);
	font-size: 34px;
	font-family: arial;
	position: relative;
}
div[type="timeline/slideshow"] > section> article ,div[type="timeline"] > section> article {
	transform: translate(12px,14px);
	color: black;
	font-size: 22px;
	font-family: arial;
	position: relative;
	padding: 10px;
	word-wrap: break-word;
}  
div[type="timeline"]>section:last-of-type::after {
	display: none;
}
	
div[type="slideshow"]  {
	height:471px;
}
div[type="slideshow"] > section:not(.hide) {
	margin: auto;
	width: 900px;
	z-index: 100;
	border-top: 1px solid grey;
	border-left: 4px solid #00BCD4;
	min-height:250px;
	background-color: #b3e5fc2b;
	border-radius: 4px;
	margin-bottom: 55px;
	position: relative;
	top: 21.4%;
	left:200px;
	box-shadow: rgb(136, 136, 136) 3px 3px 1px;
}

div[type="slideshow"] > section:not(.hide) > header {
	font-weight: 600;
	color: cadetblue;
	transform: translate(93px, 32px);
	font-size: 34px;
	font-family: arial;
	position: relative;
}

div[type="slideshow"] > section:not(.hide) > article {
	transform: translate(87px,39px);
	color: black;
	font-size: 22px;
	font-family: arial;
	position: relative;
	padding: 10px;
	word-wrap: break-word;
}

.active{    
	opacity: 1 !important;
}

.hide {
	opacity: 0; 
	min-height: 0 !important; 
	margin: 0 !important;
}
.hide header, .hide article {
	display: none;
}
@keyframes fadein {
	0% { opacity: 0 }
	50% { opacity: 0.5 }
	100% {opacity: 1}
}


progress {
	height: 3.6px;
	top: 46px;
	left: 0px;
	width: 100%;
	position: fixed;
	margin-left: -1px;
	margin-top: -1px;
}
.color_arrow {
	position: relative;
	top: 228px;
	color: #085153;
	left: 93px;
}
.color_arrows {
	position: relative;
	top: 228px;
	color: #085153;
	left: 94% !important;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;