I have a problem with my json code. I want to append each json value comes from a key to be appended to an html class name which matches the key of json data.

here's my Live demo

if you see the result in the life demo. it's only appending the last record. is it possible to make it show all records in order?

json

var json = '[{"castle":"big","commercial":"large","common":"sergio","cultural":"2009"},' + '{"castle":"big2","commercial":"large2","common":"sergio2","cultural":"20092"}]';

html

<div class="castle"></div>
<div class="commercial"></div>
<div class="common"></div>
<div class="cultural"></div>

javascript

var data = $.parseJSON(json);
$.each(data, function(l,v) {
    $.each(v, function(k,o) {
        $('.'+k).attr('id', k+o);
        console.log($('#'+k+o).attr('id'));
        $('#'+k+o).text(o);
     });
});

for more illustration... I want the result in the live demo to look like this

big large sergio 2009, big2 large2 sergio2 20092