Send row data when clicking button?

I have the next information object

var data = [ 
       { 
         name: 'John Doe', 
         transactions: [{...},{...},{...}] 
       }, 
       {...}
    ];

Im inserting this data into a table like this:

function addRowsData(data) {
  var table = document.getElementById('main-table');
  var rowCount = table.rows.length;
  var tBody = document.createElement('tbody');

  table.appendChild(tBody);

  for (var i = 0; i < data.length; i++) {
    var info = data[i];
    var tr = tBody.insertRow();
    for(var key in info){
      if(key == 'transactions') continue;

      var td = document.createElement('td');

      td.innerHTML = info[key];
      tr.appendChild(td);
    }

    var tdButton = document.createElement('td');
    var button = document.createElement('button');
    var clientId = info.id;

    button.setAttribute('type', 'button');
    button.setAttribute('class', '"btn btn-primary');
    button.setAttribute('id', clientId);
    button.innerHTML = 'More'

    tdButton.appendChild(button);
    tr.appendChild(tdButton)    

    button.addEventListener('click', function() {
      openModal(info.transactions);
    });
  }
}

function openModal(transactions) {
  console.log(transactions);

  var modal = document.getElementById('my-modal');
  var close = document.getElementsByClassName('close')[0];

  close.addEventListener('click', closeModal, false);

  modal.style.display = 'block';
}

Each row has a button and when is clicked opens a modal, on this modal I want to show the data from the transactions array, I tried doing it like this openModal(info.transactions); but this always shows the data from the last element. Is there a way to accomplish this, that when I click on the row button, I can access to the transactions array?