您不仅可以按id分组，还可以按名称分组，并使用这些字段的结果对象作为结果的键。

const arr = new Map();
rawRecords.forEach((rawRecord) => {
    const groupFieldsKey = JSON.stringify({id,name});
    const aggregatedValues = this._updateAggregateObject(rawRecord, arr.get(groupFieldsKey));
    arr.set(groupFieldsKey, aggregatedValues);
});

好吧。我们来编码一下。

const data = [
   {id: "552", value: "50.00", description: "Fraldas", },
   {id: "552", value: "35.00", description: "Creme", },
   {id: "545", value: "23.00", description: "Caneta", },
   {id: "545", value: "15.00", description: "Caderno", },
   {id: "562", value: "23.00", description: "Caneta", },
   {id: "562", value: "15.00", description: "Caderno", },
   {id: "562", value: "23.00", description: "Caneta", },
   {id: "562", value: "15.00", description: "Caderno", },
];

const data1 = [
   {id: "552", value: "50.00", description: "camisola", },
   {id: "562", value: "35.00", description: "calças", },
];

const data2 = [
   {id: "552", responsible: "antonio", },
   {id: "545", responsible: "Pedro", },
   {id: "562", responsible: "Amélia", },
   {id: "562", responsible: "Maria", },
];

const rawRecords = data.concat(data1).concat(data2);

const aggregateRawRecords = (recordsToProcess, accumulateObject, counter = 0) => {
    const copyAccumulateObject = {...accumulateObject
    };
    const notProcessedRawRecords = recordsToProcess.reduce((notProcessedResults, rawRecord) => {
        let processed = true;
        if (!rawRecord.responsible) {
            processed = !Object.keys(copyAccumulateObject)
            .filter(i => JSON.parse(i).id === rawRecord.id)
            .map(item => copyAccumulateObject[item].stuff.push({
                value: rawRecord.value,
                description: rawRecord.description,
            })).length ? false: true;
        } else {
            const groupFieldsKey = JSON.stringify({
                id: rawRecord.id,
                responsible: rawRecord.responsible,
            });
            copyAccumulateObject[groupFieldsKey] = {
                stuff: [],
            };
        }
        return processed ? notProcessedResults: [...notProcessedResults, rawRecord];
    },
    []);

    if (notProcessedRawRecords.length && !counter) {
        return aggregateRawRecords(notProcessedRawRecords, copyAccumulateObject, 1)
    } else {
        return Object.keys(copyAccumulateObject).map(item => {
            return {...JSON.parse(item),
                ...copyAccumulateObject[item]
            };
        });
    }
};

console.log(aggregateRawRecords(rawRecords, {}));

要为Amelia和Maria返回同一个表两次，我使用了以下步骤。
1.连接data和data1数组。
1.迭代data2数组。
1.对results阵列使用filter方法。
1.将HTML表添加到.pagmfalta div。
代码是用纯JavaScript编写的。

var data = [
    { Id: "552", valor: "50.00", Descricao: "Fraldas", },
    { Id: "552", valor: "35.00", Descricao: "Creme", },
    { Id: "545", valor: "23.00", Descricao: "Caneta", },
    { Id: "545", valor: "15.00", Descricao: "Caderno", },
    { Id: "562", valor: "23.00", Descricao: "Caneta", },
    { Id: "562", valor: "15.00", Descricao: "Caderno", },
    { Id: "562", valor: "23.00", Descricao: "Caneta", },
    { Id: "562", valor: "15.00", Descricao: "Caderno", },
];

var data1 = [
    { Id: "552", valor: "50.00", Descricao: "camisola", },
    { Id: "562", valor: "35.00", Descricao: "calças", },
];

var data2 = [
    { Id: "552", Responsavel: "antonio", },
    { Id: "545", Responsavel: "Pedro", },
    { Id: "562", Responsavel: "Amélia", },
    { Id: "562", Responsavel: "Maria", },
];

var results = data.concat(data1);

document.querySelector(".dad-pagamento").addEventListener("click", clickHandler);

function clickHandler() {
    // Sort person list by Id value
    data2.sort(function (a, b) {
        return a.Id - b.Id;
    });

    data2.forEach(function (person) {
        var id = person.Id;
        var filteredData = results.filter(d => d.Id === id);
        addHtml(person.Responsavel, filteredData);
    });
}

function addHtml(responsavel, filteredData) {

    var html = "";

    html += `<p class="taman" style="text-align:left"> ${responsavel}</p>
    
              <div class="teste">
              <table class="align-middle mb-0 table table-borderless table-striped table-hover" border="1">
              
              <thead>
                <tr>
                  <th class="text-center">Nº Recibo</th>
                  <th class="text-center">Valor</th>
                  <th class="text-center">Descrição</th>
                </tr>
               </thead>                              
               <tbody>`;

    filteredData.forEach(function (data) {
        html += `<tr>
                   <td class="text-center text-muted"> ${data.Id}</td>
                   <td class="text-center text-muted"> ${data.valor}</td>
                   <td class="text-center text-muted"> ${data.Descricao}</td>
                 </tr>`;
    });

    html += `</tbody></table></div>`;

    document.querySelector(".pagmfalta").innerHTML += html;
}

<button type="button" tabindex="0" class="dropdown-item btn-show dad-pagamento" href="s3" data-element="#minhaDiv3">Teste</button>
<div class="row pagmfalta"></div>