Mediante mi código PHP

		//Busca todas las categorías en referencia de un producto por ejemplo: Capitulo 1, Capitulo 2, Capitulo 3
		$stmtChapters = $con->prepare("SELECT id_chapters,chapters FROM chapters WHERE id_video=?");
		$stmtChapters->bind_param("i",$id_video);
		$stmtChapters->execute();
		$stmtChapters->store_result();

		if ($stmtChapters->num_rows>0) {
			$stmtChapters->bind_result($id_chapters, $chapters);
			while ($stmtChapters->fetch()) {
				echo '<h1 class="chapters-player">'.$chapters.'</h1>';

				//Obtenemos todo los contenidos en base a la categoria por ejemplo se muestran 10 vídeos o textos en el Capitulo 1 y así sucesivamente en los otros capitulos.
				$stmtVideos = $con->prepare("SELECT title_video,format,multimedia,detail,url_website FROM videos WHERE id_video=? AND id_chapters=? AND active=?");
				$stmtVideos->bind_param("iii",$id_video,$id_chapters,$active);
				$stmtVideos->execute();
				$stmtVideos->store_result();

				if ($stmtVideos->num_rows>0) {
					$stmtVideos->bind_result($title_video, $format,$multimedia,$detail,$url_website);
					$i = 1;
					$mNav='<div id="enlaces" class="videolist">';
					$mDivs='<div id="ocultado" style="display: none;">';
					while ($stmtVideos->fetch()) {

						if($format === 'video') {
							$mNav.='<a class="link" href="'.$multimedia.'">
										<div class="panel-video">
											<span class="play-title">'.$title_video.'</span>
										</div>
									</a>';
						}
						if($format === 'html') {
							$mNav.='<a class="link" href="'.$url_website.'">
										<div class="panel-video">
											<span class="play-title">'.$title_video.'</span>
										</div>
									</a>';
						}

						if($format === 'text') {
							$mNav.='<a class="link" id="link_'.$i.'" href="#">
										<div class="panel-video">
											<span class="play-title">'.$title_video.'</span>
										</div>
									</a>';
							$mDivs.='<div class="cuadro frame-scroll-multi-content" id="c_link_'.$i.'">'.$detail.'</div>';
						}
						
					$i++;
					}
					$mDivs.='</div>';
					$mNav.='</div>';

					echo $mNav;
					echo $mDivs;

				} else {
					//
				}
			}
		} else {
			//
		}

Obtengo las categorías de los capítulos y en consiguiente también los productos o los datos enlazados al capitulo obteniendo lo siguiente:

[![introducir la descripción de la imagen aquí][1]][1]

El problema exacto que presento es justo en esta parte del código PHP

						if($format === 'text') {
							$mNav.='<a class="link" id="link_'.$i.'" href="#">
										<div class="panel-video">
											<span class="play-title">'.$title_video.'</span>
										</div>
									</a>';
							$mDivs.='<div class="cuadro frame-scroll-multi-content" id="c_link_'.$i.'">'.$detail.'</div>';
						}
						$i++;

Debido a que aquella parte de código me imprime lo siguiente:

    <div class="list-scroll-video">
    	<h1 class="chapters-player">Capitulo 1</h1>
    	<div id="enlaces" class="videolist">
    		<a class="link" id="link_1" href="#">
    			<div class="panel-video">
    				<span class="play-title">Texto 1</span>
    			</div>
    		</a>
    		<a class="link" id="link_2" href="#">
    			<div class="panel-video">
    				<span class="play-title">Texto 2</span>
    			</div>
    		</a>
    		<a class="link" id="link_3" href="#">
    			<div class="panel-video">
    				<span class="play-title">Texto 3</span>
    			</div>
    		</a>
    		<a class="link" id="link_4" href="#">
    			<div class="panel-video">
    				<span class="play-title">Texto 4</span>
    			</div>
    		</a>
    	</div>
    
    	<div id="ocultado" style="display: none;">
    		<div class="cuadro frame-scroll-multi-content" id="c_link_1">	DATOS DE TEXTO 1	</div>
    		<div class="cuadro frame-scroll-multi-content" id="c_link_2">	DATOS DE TEXTO 2	</div>
    		<div class="cuadro frame-scroll-multi-content" id="c_link_3">	DATOS DE TEXTO 3	</div>
    		<div class="cuadro frame-scroll-multi-content" id="c_link_4">	DATOS DE TEXTO 4	</div>
    	</div>
    
    	<h1 class="chapters-player">Capitulo 2</h1>
    	<div id="enlaces" class="videolist">
    		<a class="link" id="link_1" href="#">
    			<div class="panel-video">
    				<span class="play-title">Texto 5</span>
    			</div>
    		</a>
    		<a class="link" id="link_2" href="#">
    			<div class="panel-video">
    				<span class="play-title">Texto 6</span>
    			</div>
    		</a>
    		<a class="link" id="link_3" href="#">
    			<div class="panel-video">
    				<span class="play-title">Texto 7</span>
    			</div>
    		</a>
    		<a class="link" id="link_4" href="#">
    			<div class="panel-video">
    				<span class="play-title">Texto 8</span>
    			</div>
    		</a>
    	</div>
    
    	<div id="ocultado" style="display: none;">
    		<div class="cuadro frame-scroll-multi-content" id="c_link_1">	DATOS DE TEXTO 5	</div>
    		<div class="cuadro frame-scroll-multi-content" id="c_link_2">	DATOS DE TEXTO 6	</div>
    		<div class="cuadro frame-scroll-multi-content" id="c_link_3">	DATOS DE TEXTO 7	</div>
    		<div class="cuadro frame-scroll-multi-content" id="c_link_4">	DATOS DE TEXTO 8	</div>
    	</div>
    	
    </div>

Si ustedes observan en el Capitulo 2, se vuelve a repetir los id tanto en `<a class="link" id="link_1" href="#">` (`id="link_1"`) como en `div class="cuadro frame-scroll-multi-content" id="c_link_1">	DATOS DE TEXTO 1	</div>` (`id="c_link_1"`)

Al repetirse los números me causa un problema con el código jQuery, entonces para que sea más claro el resultado que debo y que debería obtener es el siguiente resultado tal cual:

    <div class="list-scroll-video">
    	<h1 class="chapters-player">Capitulo 1</h1>
    	<div id="enlaces" class="videolist">
    		<a class="link" id="link_1" href="#">
    			<div class="panel-video">
    				<span class="play-title">Texto 1</span>
    			</div>
    		</a>
    		<a class="link" id="link_2" href="#">
    			<div class="panel-video">
    				<span class="play-title">Texto 2</span>
    			</div>
    		</a>
    		<a class="link" id="link_3" href="#">
    			<div class="panel-video">
    				<span class="play-title">Texto 3</span>
    			</div>
    		</a>
    		<a class="link" id="link_4" href="#">
    			<div class="panel-video">
    				<span class="play-title">Texto 4</span>
    			</div>
    		</a>
    	</div>
    
    	<div id="ocultado" style="display: none;">
    		<div class="cuadro frame-scroll-multi-content" id="c_link_1">	DATOS DE TEXTO 1	</div>
    		<div class="cuadro frame-scroll-multi-content" id="c_link_2">	DATOS DE TEXTO 2	</div>
    		<div class="cuadro frame-scroll-multi-content" id="c_link_3">	DATOS DE TEXTO 3	</div>
    		<div class="cuadro frame-scroll-multi-content" id="c_link_4">	DATOS DE TEXTO 4	</div>
    	</div>
    
    	<h1 class="chapters-player">Capitulo 2</h1>
    	<div id="enlaces" class="videolist">
    		<a class="link" id="link_5" href="#">
    			<div class="panel-video">
    				<span class="play-title">Texto 5</span>
    			</div>
    		</a>
    		<a class="link" id="link_6" href="#">
    			<div class="panel-video">
    				<span class="play-title">Texto 6</span>
    			</div>
    		</a>
    		<a class="link" id="link_7" href="#">
    			<div class="panel-video">
    				<span class="play-title">Texto 7</span>
    			</div>
    		</a>
    		<a class="link" id="link_8" href="#">
    			<div class="panel-video">
    				<span class="play-title">Texto 8</span>
    			</div>
    		</a>
    	</div>
    
    	<div id="ocultado" style="display: none;">
    		<div class="cuadro frame-scroll-multi-content" id="c_link_5">	DATOS DE TEXTO 5	</div>
    		<div class="cuadro frame-scroll-multi-content" id="c_link_6">	DATOS DE TEXTO 6	</div>
    		<div class="cuadro frame-scroll-multi-content" id="c_link_7">	DATOS DE TEXTO 7	</div>
    		<div class="cuadro frame-scroll-multi-content" id="c_link_8">	DATOS DE TEXTO 8	</div>
    	</div>
    
    </div>

Me pueden indicar que cambios debo realizar para obtener ese resultado.

  [1]: https://i.sstatic.net/q5xRo.png