Most of what you are doing is using the jQuery library. SO you may need to ask this in the jQuery forum, not the vanilla JavaSript forum.
var i = new Image();
i.src = "data:" + datapair + "," + datapair;
You create an Image object. Good. But then you try to make the .src
of the object--which, for an Image object, means the FILENAME OF THE IMAGE--be some funky date: xxx,yyy
How do you expect the Image to then show up on the page if you don't give it a valid FILE NAME (techinically, a file URL, but if you use only a name it is assumed to be in the same domain and is converted to a URL).
Then, to make matters even stranger, you appear
to be appending
your newly created Image object to the Image object that already exists on the page with the ID of "img".
You say the first version works. I have to believe you. But it makes no sense to me.