referencing a specific element when it's wrapped in another
<p>So I am trying to dynamically generate some boxes on screen using divs and when you click on a specific one (<code>name=box1</code>) it executes certain code. When they were hard coded into my html the following code worked fine but now since I am wrapping them in a <code>p</code> it takes 'this' as a reference to the <code>p</code> not the <code>div</code>. I believe its line 11 that needs changing. </p>

<pre><code>$(document).ready(function(){
  $('#swapboxes').click(function(){
        //build the box location array and boxes
        $('#boxeshere').html("");
        for(var i = 0;i &lt; $.gameconfig.numofboxes;i++){
            $('&lt;div class="boxes" style="background:#bf3215;height:100px;width:100px;left:'+200*i+'px;position:fixed;" name="box' + i + '" id="' + i + '"/&gt;').appendTo('#boxeshere');
        }
  });
  //Execution for clicking on boxes
  $('.boxes').click(function(){
        if(this.attributes["name"].value == "box1"){
            $("#info").text("Congrats!!! You win!");
        }
        else{
            $("#info").text("I'm sorry, wrong box");
        }   
  });
});
</code></pre>
