jQuery: OnClick the title video is correct, but url is of next video
<p>I have a search page like  </p>

<pre><code>&lt;div class=""&gt;
    &lt;input id="search-input" type="text" class="input-medium search-query span4"&gt;
&lt;/div&gt;

&lt;div id="result"&gt;

&lt;/div&gt;

&lt;div id="result-template"&gt;
    &lt;div class="hide-item item" id="item"&gt;
        &lt;div style="float:left"&gt;
            &lt;img class="thumbnail" src="" alt="" /&gt;
        &lt;/div&gt;
        &lt;div id="name"&gt;
            &lt;p class="title"&gt;&lt;/p&gt;
            &lt;p class="views"&gt;&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;  
</code></pre>

<p>and jQuery as   </p>

<pre><code>$(function(){
    $('#search-input').live('keyup',function() {
        var search_input = $(this).val();
        var keyword = encodeURIComponent(search_input);
        var yt_url = 'http://gdata.youtube.com/feeds/api/videos?q='+keyword+'&amp;format=5&amp;max-results=10&amp;v=2&amp;alt=jsonc';

        $.ajax({
          url: yt_url,
          type: 'GET',
          dataType: 'jsonp',
          complete: function(xhr, textStatus) {
            //called when complete
          },
          success: function(response, textStatus, xhr) {
            if(response.data.items) {
                var template = $('#item').clone();
                $('#result').html(template);
                $.each(response.data.items, function(i, data) {
                    console.log(data)
                    search_data = {
                        'id': data.id,
                        'title': data.title,
                        'views': data.viewCount,
                        'thumbnail': data.thumbnail['sqDefault'],
                    }
                    video_result_template(search_data);
                });
            } else {
                // var template = $('#item').clone();
                // $('#result').html(template);
            }
          },
          error: function(xhr, textStatus, errorThrown) {
            //called when there is an error
          }
        });
    });
});

// filling out the search template
function video_result_template(data) {
    var item = $('#item').clone();
    item.removeClass('hide-item');
    item.find('img').attr('src', data.thumbnail);
    item.find('.title').html(data.title);
    item.find('.views').html(data.views);
    $('#item').attr('id', data.id);
    item.addClass('view-item');
    // $('#result').append(item).fadeIn(); // slow/fast?
    $('#result').append(item).fadeIn('slow');
}
</code></pre>

<p>I get the results on the div with title, views, url. Now when I click div, the following jQuery is fired  </p>

<pre><code>$(function(){
    $('.item').live('click', function(){
        // alert(this.id);
        console.log($(this));
        var url = $('#video-frame').attr('src');
        var new_url = url.replace(/embed\/[\w -]*/g, 'embed/' + this.id);
        alert($('.title').html() + ',' + new_url);
        $('#video-frame').attr('src', new_url);
    });
});
</code></pre>

<p>which alerts right title but the url(or video_id is of the next video in the list).  </p>

<p>When I see my html from firefox I see the following </p>

<pre><code> &lt;div id="result" style="display: block;"&gt;
    &lt;div id="lqT_dPApj9U" class="item view-item"&gt;
      &lt;div style="float: left;"&gt;&lt;img alt="" src=
      "http://i.ytimg.com/vi/S2nBBMbjS8w/default.jpg" class="thumbnail" /&gt;&lt;/div&gt;

      &lt;div id="name"&gt;
        &lt;p class="title"&gt;Coke 2012 Commercial: "Catch" starring NE_Bear&lt;/p&gt;

        &lt;p class="views"&gt;619167&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div id="hKoB0MHVBvM" class="item view-item"&gt;
      &lt;div style="float: left;"&gt;&lt;img alt="" src=
      "http://i.ytimg.com/vi/lqT_dPApj9U/default.jpg" class="thumbnail" /&gt;&lt;/div&gt;

      &lt;div id="name"&gt;
        &lt;p class="title"&gt;Coca-Cola Happiness Machine&lt;/p&gt;

        &lt;p class="views"&gt;4791156&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div id="item" class="item view-item"&gt;
      &lt;div style="float: left;"&gt;&lt;img alt="" src=
      "http://i.ytimg.com/vi/S2nBBMbjS8w/default.jpg" class="thumbnail" /&gt;&lt;/div&gt;

      &lt;div id="name"&gt;
        &lt;p class="title"&gt;Coke 2012 Commercial: "Catch" starring NE_Bear&lt;/p&gt;

        &lt;p class="views"&gt;619167&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
</code></pre>

<ul>
<li>If seen clearly the first and last div has same data elements</li>
<li>infact the difference is that the last div is copy of first element</li>
<li>The last element has invalid id="item"(must be video id)  </li>
</ul>

<p><strong>Question</strong>
How can I fix this issue?   </p>

<p><strong>JSFiddle</strong>
<a href="http://jsfiddle.net/hhimanshu/F5NHK/" rel="nofollow">http://jsfiddle.net/hhimanshu/F5NHK/</a>  </p>

<p><strong>Required</strong>
After search, click on any video div and it must give right video id and title<br>
P.S. in fiddle clicking on list is not doing anything(don't know why, it works on my system though)</p>
