How to solve improper positioning of console mini page layout in visualforce when dynamically adding records?

Problem Statement : Have a datatable of  rows of salesforce object ,lets say Cases and have different fields associated to it few being AccountID, ContactID . Now what we have is a table like below of cases having the inofmation of parent account and contact like below:


We all know, there's no provision to give dynamically id's to visualforce components . It becomes an issue with outputfields(refernce type fields) when records are added dynamically to the page as each of the record is allotted the same id. Now if we try to hover the mini page console is placed next to the very first occurence instead of relative position.


Solution:
After your page loads completely have below function run :

j$ = jQuery.noConflict();
  function modifyIDS(){
             console.log('modifyIDS');
            j$("a[id *='lookup']").each(function(index){
                var newID = "referencedField"+index;
                var elem = j$(this);
                var fullHTML = elem[0].outerHTML;
                var oldID = elem.attr('id');
                 console.log('modifyIDS2' +oldID);
                var regex = new RegExp( oldID, 'g');
               // console.log(fullHTML);
               
                try{
                 
                    elem[0].outerHTML = fullHTML.replace(regex,
                    newID);
                }
                  catch(e){
                    console.log('error occured: '+e);
                }
            });
        }
j$(document).ready(function() {
 
                 modifyIDS();
});

Result:
The mini page layout will start positioning very next to element