JQuery and PHP for dynamically created elements -

can pls me?

i'm working on dynamic website. have 2 navigations points , have video window on right side. clicking on 1 navigation point respective video should appear in video window. problem is: navigation list created dynamically , video appearance (in case urls videos embedded youtube). here php code list of navigation points created dynamically:

function reborn_videos($attribute){     ob_start();     $urls = $attribute['filme'];     $urls = explode(',', $urls); ?>   <div id="mobil_content">      <?php for($i=1; $i<= count($urls); $i++) {           $movie_title = $attribute['title'.$i];     ?>               <div class="box">                <div class="box_title_video"><a class="expand"><?php echo $movie_title; ?>     </a></div>                 <?php foreach ($urls $url) { ?>                 <div class="box_body_iframe">                     <iframe width="100%" height="315" src="https://www.youtube.com/embed/<?php echo trim($url); ?>" frameborder="0" allowfullscreen></iframe>                    </div>                   <?php   } ?> </div> <?php   } ?> 

here changed , looks right now:

function reborn_videos($attribute){     ob_start();     $urls = $attribute['filme'];     $urls = explode(',', $urls); ?>       <div id="mobil_content">      <?php for($i=1; $i<= count($urls); $i++) {              $movie_title = $attribute['title'.$i];     ?>           <div class="box">                <div class="box_title_video"><a class="expand"><?php echo $movie_title; ?></a></div>                  <div class="box_body_iframe">                      <iframe width="100%" height="315" src="https://www.youtube.com/embed/<?php echo trim($urls[$i]); ?>" frameborder="0" allowfullscreen></iframe>                    </div>         </div>     <?php   } ?> 

and here jquery want use show , hide videos:

var $allevideos = $(".box_body_iframe");  function showvideos() {   $allevideos.each(function(){     if ( $(this).hasclass('active') ) {       $(this).show();     } else{       $(this).hide();     }   }); } $allevideos.hide();  $(".box_title_video").click(function(){   $allevideos.removeclass('active');   $(this).next().addclass('active');   showvideos(); }); 

in jquery code have no changes how browser output html code:

<div id="mobil_content"> <div class="box"> <div class="box_title_video"> <a class="expand">reborn</a> </div> <div class="box_body_iframe" style="display: none;"> <iframe height="315" frameborder="0" width="100%" allowfullscreen="" src="https://www.youtube.com/embed/7pnrkyu0hts"> </div> </div> <div class="box"> <div class="box_title_video"> <a class="expand">trailer</a> </div> <div class="box_body_iframe active" style="display: block;"> <iframe height="315" frameborder="0" width="100%" allowfullscreen="" src="https://www.youtube.com/embed/"> </div> </div> </div> 

the problem is: jquery animation shows 1 , same video in video window. :-(

the problem seems have loop in loop , both loops loop on urls:

for($i=1; $i<= count($urls); $i++)     ...     foreach ($urls $url) 

so in every entry in outer loop, generate list videos. , activate first 1 of list every time $(this).next().addclass('active'); show same, first, video.

you can solve problem replacing inner loop current item: $urls[$i]:

<div class="box_title_video"><a class="expand"><?php echo $movie_title; ?>     </a></div>     <div class="box_body_iframe">         <iframe width="100%" height="315"              src="https://www.youtube.com/embed/<?php echo trim($urls[$i]); ?>"             frameborder="0" allowfullscreen></iframe>        </div>   </div> 

edit: noticed loop runs form 1 , arrays zero-indexed, need:

... src="https://www.youtube.com/embed/<?php echo trim($urls[$i - 1]); ?>" ...                                                              ^^^^^^^ here 

now correctly show 2 blocks can see in second video, there no url.