Appending messages to hidden input fields This code contains an array of objects that I loop over and append to hidden input fields in the DOM. As these inputs have no ID, I first select them by name using $.each and then check the value by looping over the array using another $.each. If there is a match, I then append some HTML to the DOM.

It works fine, but I have doubts about the code, especially where I am using two $.each. Is there a better way of doing this?

var messages = [
            {
                "code":"203294641",
                "message":"A night costs 332 miles"
            },
            {
                "code":"203294642",
                "message":"The night is dark and full of terrors. Costs 32 miles."
            },
            {
                "code":"203294643",
                "message":"The night is dark and full of terrors. Costs 67 miles."
            },
            {
                "code":"203294644",
                "message":"The night is dark and full of terrors. Costs 423 miles."
            },
            {
                "code":"203294645",
                "message":"The night is dark and full of terrors. Costs 431 miles."
            },
            {
                "code":"203294646",
                "message":"The night is dark and full of terrors. Costs 76 miles."
            }
        ];



    $('input[name="code"]').each(function(){
        var inp = $(this);
        $.each(messages, function(i) {
            if (inp.val() == messages[i].code){
                inp.closest('.plan').find('.loyalty').append('&lt;div class="frequent-flyer-message"&gt;' + messages[i].message + '&lt;/div&gt;');
            }
        });
    });
It would be much easier to store the code/message pairs in an object, then no loop is needed:

var messagesByCode = {
  "203294641": "A night costs 332 miles",
  "203294642": "The night is dark and full of terrors. Costs 32 miles."
  // etc.
};

$('input[name="code"]').each(function(){
  var inp = $(this);
  inp.closest('.plan').find('.loyalty').append('&lt;div class="frequent-flyer-message"&gt;' + messagesByCode[inp.val()] + '&lt;/div&gt;');
});


If you can't change the structure, generate the better structure once at the beginning:

var messagesByCode = messages.reduce(function(object, item) {object[item.code] = item.message}, {});




EDIT: Some more remarks.

Another thing that should be considered is the point of this code. Why are you doing this? Why only once at the beginning? What is the bigger picture? 

The reason I ask is, because this looks like something that should happen server-side. Do the input values change client-side? If yes you should structure your code in a way that allows you to update a single input.

What does your HTML look like? Why isn't the &lt;div class="frequent-flyer-message"&gt;&lt;/div&gt; part of the existing HTML? 

I'm not really fond of the hard coded "path" to the target element (....closest('.plan').find('.loyalty')...). I generally prefer to write JavaScript as generic (and reuseable) as possible, but without the bigger picture I can't think of a good alternative right now.