Price Search / jQuery / Javascript

Question

I want to compare the product and the city of the table.

By clicking on price I get the product and the city on my panel, up to ai ok! only that I wanted to click on another product to make the comparison below the first comparison I made?

For those who did not understand the comparison is as follows

I compare the price of each city’s product, only on the dashboard each product has to have its container to make the comparison.

At first there is no panel only when you click the button, there are 3 rows in my table, each row will have 8 button, each row of these I want a panel, by clicking the button of row 1 or 2 whatever makes it will open a panel, by clicking on a button of the same line that opened the panel it replaces the values, now if I click on another line it will open another panel and so on

jsFiddle: https://jsfiddle.net/hr7mejnm/1/ with code I received in the other question.

Answer 1

You need to create a variable that stores the last chosen and accurate value of a function that compares the values.

It could be something like this:

var articles = getElements('article');
var spans = articles.map(function(el) {
    return getElements('p span', el);
});


function getElements(selector, rel) {
    var list = (rel || document).querySelectorAll(selector);
    return [].slice.call(list);
}

function addValues(target, el, iTr, iTd) {
    var cidade = cols[iTd].innerHTML;
    var produto = linhas[iTr].querySelector('th').innerHTML;
    var preco = el.innerHTML;

    [cidade, produto, preco].forEach(function(val, i) {
        target[i].innerHTML = val;
    });
}

function handler(el, indexTr, indexTd) {
    return function(e) {
        articles[indexTr].style.display = 'block';
        addValues(spans[indexTr], el, indexTr, indexTd);

    }
}

var cols = getElements('th').slice(1);
var linhas = getElements('tr').slice(1);
linhas.forEach(function(tr, i) {
    var tds = getElements('td', tr);
    tds.forEach(function(td, j) {
        td.addEventListener('click', handler(td, i, j));
    });
});

jsFiddle: https://jsfiddle.net/hr7mejnm/4/