"Undefined" value in input (jQuery)
<p>Please help, why instead of Input data appears <code>Undefined</code>?</p>

<p><strong><a href="http://jsfiddle.net/tgD2V/" rel="nofollow">jsFiddle</a></strong></p>

<p>HTML:</p>

<pre><code>    &lt;div id="au"&gt;
        &lt;div id="allow"&gt;  
        &lt;p class="tf"&gt;Allow From:&lt;/p&gt;&lt;br&gt;

        &lt;center&gt;&lt;button id="aadd1"&gt;+&lt;/button&gt;&lt;br&gt;&lt;/center&gt;  
        &lt;/div&gt;&lt;br&gt;            
        &lt;div id="deny"&gt;  
        &lt;p class="tf"&gt;Deny From:&lt;/p&gt;&lt;br&gt;

        &lt;center&gt;&lt;button id="aadd2"&gt;+&lt;/button&gt;&lt;br&gt;&lt;/center&gt;
        &lt;/div&gt;
    &lt;/div&gt;
 &lt;center&gt;&lt;button id="go"&gt;gogogo&lt;/button&gt;&lt;/center&gt;

 &lt;span id="x"&gt;&lt;/span&gt;
</code></pre>

<p>JavaScript:</p>

<pre><code>$(document).ready(function(){
    var a1 = 0;
    var a2 = 0;

    $("#aadd1").click(function(){
        $("#allow").append('&lt;input class="lf" id="a-'+(++a1)+'" type="text"&gt;&lt;br&gt;&lt;br&gt;');
    });
    $("#aadd2").click(function(){
        $("#deny").append('&lt;input class="lf" id="a-'+(++a2)+'" type="text"&gt;&lt;br&gt;&lt;br&gt;');
    });

    var al="";
    var den="";
    var ad="";


    $('#allow input').bind('blur keyup',function() {
        $(this).data('allow', "Allow from " + $(this).val() + "&lt;br&gt;");
       });
    $('#deny input').bind('blur keyup',function() {
        $(this).data('deny', "Deny from " + $(this).val() + "&lt;br&gt;");
       });


$('#go').click(function(){
        $("#allow input").each(function(){
            if($(this).val()){
                al += $(this).data('allow') + "\n" || '';
            }
          });
        $("#deny input").each(function(){
            if($(this).val()){
                den += $(this).data('deny') + "\n" || '';
            }
          });
    ad = "Order deny,allow &lt;br&gt;" + al + den;
    $("#x").html(ad);
});
});
</code></pre>
