Tooltip not working well based on array id

Question

What I am trying to do is to make the "tooltip" work in this way:

When I click on some "link" with X id it will show the "tooltip" text based on "element" id I have set in my array.

The problem now is that when I create a new link with the id of the second or the third array its still shows me the the first one

My code:

var wp_button_pointer_array = new Array();
wp_button_pointer_array[1] = {
    'element' : 'wp-button-pointer',
    'options' : {
        'content': 'The HTML content to show inside the pointer', 
        'position': {'edge': 'top', 'align': 'center'} 
    } 
}; 
wp_button_pointer_array[2] = { 
    'element' : 'some-element-id', 
    'options' : { 
        'content': 'The HTML content to show inside the pointer', 
        'position': {'edge': 'top', 'align': 'center'} 
    }
};


jQuery(document).ready( function($) {

    jQuery('.wp-button-pointer-open-next').click(function(e) {
        e.preventDefault(); 
        if(typeof(jQuery().pointer) != 'undefined') { // make sure the pointer class exists

            if(jQuery('.wp-pointer').is(":visible")) { // if a pointer is already open...
                var openid = jQuery('.wp-pointer:visible').attr("id").replace('wp-pointer-',''); // ... note its id
                jQuery('#' + wp_button_pointer_array[openid].element).pointer('close'); // ... and close it
                var pointerid = parseInt(openid) + 1;
            } else {
                var pointerid = 1; // ... otherwise we want to open the first pointer
            }

        }
    });         
});

Answer 1

I think the issue may be on this line

var openid = jQuery('.wp-pointer:visible').attr("id").replace('wp-pointer-','');

1) It may be possible that the first one is not actually hidden but covered by the new one. The attr() function is only going to get the attribute of the first matched element. To troubleshoot you could add console.log(jQuery('.wp-pointer:visible').length); to see if only one element is being returned.

2) Ensure that when you are creating the new ones, that you are keeping the same ID pattern ("wp-pointer-#") and that the number - represented by the # symbol - is changing. To troubleshoot you could add console.log(jQuery('.wp-pointer:visible').attr("id")); to see if the ID is what you are expecting it to be.

update

If the problem is with var pointerid = 1; and you need to get the id of the element that was clicked, I think you can do it this way:

jQuery(document).ready( function($) {
    jQuery('.wp-button-pointer-open-next').click(function(e) {
        e.preventDefault(); 
        if(typeof(jQuery().pointer) != 'undefined') { 
            if(jQuery('.wp-pointer').is(":visible")) { /
                var openid = jQuery('.wp-pointer:visible').attr("id").replace('wp-pointer-',''); 
                jQuery('#' + wp_button_pointer_array[openid].element).pointer('close'); 
                var pointerid = parseInt(openid) + 1;
            } else {
                var pointerid  = 1; //default
                var clickedId = $(e.target).attr("id");

                for (var i in wp_button_pointer_array) {
                    if (wp_button_pointer_array[i].element === clickedId) {
                        pointerid = i;
                        break; //exit the for loop
                    }
                }
            }
        }
    });         
});