Get a different meta value with ajax when different elements are clicked

Question

I have a custom post type of Hero, and each hero has some spells with spell icon, name, description stored in custom fields (repeatable fields through the "custom fields suite plugin").

What i want to do is display the name and icon of the spell and when the image/name is clicked get the spell description through ajax.

I'm having trouble getting a different description for each spell.

Here is what i got so far.

PHP (functions.php):

add_action( 'wp_enqueue_scripts', 'ajax_test_enqueue_scripts' );

function ajax_test_enqueue_scripts() {
    wp_enqueue_script( 'ajax', get_template_directory_uri() .'/js/ajax.js', array('jquery'), '1.0', true );
}


add_action( 'wp_ajax_ajax_action', 'ajax_action' ); // ajax for logged in users
add_action( 'wp_ajax_nopriv_ajax_action', 'ajax_action' ); // ajax for not logged in users

function ajax_action() 
{

    $fields = CFS()->get('spells', 18);
    exit(json_encode($fields)); // stop executing script

}

PHP (template file):

$fields = CFS()->get('spells');
foreach ($fields as $field) {
    echo '<div style="overflow:hidden;clear:both"><div style="float:left;padding: 2rem 1rem;width: 125px;" class="click-'. $field['key_id'] .'"><img src="'. $field['icon'].'"></div>';
    echo '<span style="float:left;padding: 2rem;width:100%;max-width: 800px;"><strong>'.$field['name'].'</strong></span></div>';
}

Javascript:

jQuery(document).ready(function($) 
{
    $.ajax({
        url: ajaxurl,
        data: {
            'action':'ajax_action',
            'post_id' : 18
        },
        success:function(data) {
            var hero = JSON.parse(data);

            for(var i of hero){
                $('.click-' + i.key_id).click(function(){
                    $('.changing').html(hero[1]['description']);
                })
            }
        }
    });
})

What i can't figure out is how to get the correct description for the right spell.

$field['key_id'] is a number for each spell 1,2,3,4

The hero object in console.log http://i.imgur.com/pXaGSgU.png

And the fields http://i.imgur.com/9o7dtRD.png

Answer 1

I figured it out myself thanks to this Q&A. The problem was with closures in loops.

Can't really explain what happens but it works for me.

jQuery(document).ready(function($){
    $.ajax({
        url: ajaxurl,
        data: {
            'action':'ajax_action',
            'post_id' : 18
        },
        success:function(data) {
            var hero = JSON.parse(data);
            function createCallback( i ){
              return function(){
                $('.changing').html(hero[i]['description']);
              }
            }

            $(document).ready(function(){
              for(var i = 0; i < hero.length; i++) {
                $('.click-' + i).click( createCallback( i ) );
              }
            });
        }
    });
})