Populating array with items from different HTML attributes

Question

I have about 1000 images and textareas with the same class name and a custom attribute. The classes names are emoticon and emoticonlist respectively. The custom attributes are emo-tag and emo-ascii respectively.

Each image has its partner (a textarea) with the exact same content in its custom attribute.

Example:

emo-tag   = "f-x" // for images
emo-ascii = "f-x" // for textareas

where x represents a number from 0 to 999.

My script captures the images attributes and what I need with no problem. The problem starts when I try to get the value of the textarea which have the exact attribute content like the image.

Here is my code:

$(function(){
var json = [];

$('img').each(function(){
    var emoimg  = $(this).attr("src");
    var emoalt  = $(this).attr("alt");
    var emotag  = $(this).attr("emo-tag");

    //Does not this supposed to capture the value of this specific textarea?
    var emoascii= $('.emoticonlist').attr("emo-ascii",emotag).val();

        json.push({
            id : emotag,
            name : emoalt,
            img : emoimg,
            content: emoascii       
        });

});
  var s = JSON.stringify(json);
  $("#content").after("<div>" + s + "</div>");
});

Like I said, the code works but the textarea captured and pushed into the array is just the first one and all the items of the array. How can I accomplish what I want?

Current Output:

[
{"id":"emo-0","name":"Smiley Face","img":"images/smiley-face.png","content":":)"},
{"id":"emo-1","name":"Big smile","img":"images/big-smile.png","content":":)"},
{"id":"emo-2","name":"Sad face","img":"images/sad-face.png","content":":)"},
...
...
...
]

Desired Output:

[
{"id":"emo-0","name":"Smiley Face","img":"images/smiley-face.png","content":":)"},
{"id":"emo-1","name":"Big smile","img":"images/big-smile.png","content":":D"},
{"id":"emo-2","name":"Sad face","img":"images/sad-face.png","content":":("},
...
...
...
]

Answer 1

Using $('.emoticonlist').attr("emo-ascii",emotag), you're setting the attribute instead of getting the element where the attribute is equal to emotag.(http://api.jquery.com/attr/)

Perhaps try replacing the line

var emoascii= $('.emoticonlist').attr("emo-ascii",emotag).val();

with

var emoascii= $('.emoticonlist[emo-ascii=' + emotag +']').val();

(https://api.jquery.com/attribute-equals-selector/)