How to individually refer to a dynamically generated bootstrap panels with jQuery
<p>I'm trying to refer to each individual bootstrap panel that has been generated using a 'for' loop in JavaScript but it doesn't work as expected.
Am trying to change it's border color when it is hovered on. Here's the JavaScript code snippet:</p>

<pre><code>                     /*****For loop starts here******/
                  for (var i = 0; i &lt; data.query.search.length; i++) {
                    var title = data.query.search[i].title;
                    var summary = data.query.search[i].page;
                    $('#article').append('&lt;div class="panel panel-default"&gt;&lt;div class="panel-body"&gt;&lt;h4&gt;' + title + '&lt;h4&gt;&lt;br&gt;&lt;small&gt;' + summary + '&lt;/small&gt;&lt;/div&gt;&lt;/div&gt;');

                    /*********Here is the hover function********/
                    $(".panel").hover(function() {
                      $(this).css({
                        "border": "2px solid rgb(255,145,0)",
                        "cursor": "pointer"
                      });
                    }, function() {
                      $(this).css("border", "1px solid #ccc");
                    });
                    /********Ends here*************************/

                  }

                  /****For loop ends here*****/
</code></pre>

<p>The first few panels don't seem to respond to the hover but the others do.
Please what am I doing wrong or rather how do I refer to a dynamically generated bootstrap panels? Thank you.</p>

<p>Here is what am talking about <a href="http://codepen.io/ofuochi/full/yOaXgx/" rel="nofollow">http://codepen.io/ofuochi/full/yOaXgx/</a>
What the code basically does is to fetch Titles from Wikipedia's API based on searched terms. The first three panels don't respond to 'hover' but the rest do. I don't know what exactly am doing wrong. </p>