<div class="info container d-flex"></div>

const currentTariff = [{ id: 1, name: 'Andy' }, { id: 2, name: 'Bob' }];
const pets = [{ id: 1, pet: 'Dog' }, { id: 2, pet: "Cat" }, { id: 2, pet: 'Parrot' }];

const ferry = {}; // { 1: ['Andy', 'Dog'], 2: ['Bob', 'Cat', 'Parrot'] } 
const pusher = prop => item => (ferry[item.id] ??= []).push(item[prop]);
currentTariff.forEach(pusher('name'));
pets.forEach(pusher('pet'));

const render = (obj, el) => {
  const html = Object.entries(obj)
    .map(([id, names]) => `
      <div class="card text-white bg-secondary m-2" style="width: 18rem;">
        <div class="card-body">
          <h3 class="card-title">${id}</h3>
          <div class="card-text">${names.join(', ')}</div>
        </div>
      </div>
    `)
    .join('');

  el.insertAdjacentHTML('beforeend', html);
}

const el = document.querySelector('.info');

render(ferry, el);

console.log(ferry);