jQuery Forum

For reference:
jquery-2.1.1.min.js
jquery.mobile-1.4.5.min.js

Problem exists in bigger project, I pulled code into a test page and tried to fix. I failed. I hope someone can direct me forward.

Problem: I dynamically insert buttons into my page. Afterwards, I want to apply .data() values to each of the buttons - The buttons exist in the "generated source code" but any reference to the data key/value are missing.

Interestingly, my js can reference the key/value pair as if it exist in the page though it is missing in the generated source code (using firefox 33.1 on Windows 7 with developer plugin).

My test HTML:
<form><div id='SidePage'>&nbsp;</div></form>

My test js

1. function one()
   {
       var LANG="EN";
       var limit=50;
       var data=new Array();
       for( var counter=0; counter<limit; ++counter )
       {
           data.push({ "id_Content": counter, "EN": "Blurb"+counter });
       }
      
       var keys=GetObjKeys( data );
       var limit=keys.length;
       var id_Content=0;
       var label="";
       var buttonList=new Array();
       var id="";
   
       for( var counter=0; counter<limit; ++counter )
       {
           key=keys[counter];
           record=data[key];
           if( record[LANG] )
           {
               label=record[LANG];
               id_Content=record.id_Content;
               id="prodCont"+id_Content;
               buttonList.push("\n<a href='#' id='"+id+"' data-value='"+id_Content+"' data-role='button' class='crap ui-btn ui-btn-inline product-content'>"+label+"("+id_Content+")</a>");
           }
       }
       $("#SidePage").prepend( buttonList.join("\n") )+"</span>";
       $(".crap").data("one","two");
      
       var abc=$(".crap").eq(1).data("one");
       console.log( "abc="+abc );
   
       return true;
   }
   
   ///////////////////////////////////////////////////////////////////////////////////////////
   
   $(document).ready(
       function ()
       {
           one();
       });

The "generated source code" produces the following (note there is no reference to "data-one='two'" anywhere. My question is WHY?!

<form>
        <div id="SidePage">
<a href="#" id="prodCont0" data-value="0" data-role="button" class="crap ui-btn ui-btn-inline product-content">Blurb0(0)</a>

<a href="#" id="prodCont1" data-value="1" data-role="button" class="crap ui-btn ui-btn-inline product-content">Blurb1(1)</a>

<a href="#" id="prodCont2" data-value="2" data-role="button" class="crap ui-btn ui-btn-inline product-content">Blurb2(2)</a>

<a href="#" id="prodCont3" data-value="3" data-role="button" class="crap ui-btn ui-btn-inline product-content">Blurb3(3)</a>

<a href="#" id="prodCont4" data-value="4" data-role="button" class="crap ui-btn ui-btn-inline product-content">Blurb4(4)</a>
                &nbsp;
        </div>
    </form>