Как добавлять к атрибуту новые значения через запятую при каждом клике, а не перезаписывать значение атрибута?

$('li.ui-menu-item').click(function() {

  const $viewsFieldPmsColorData = $(this).find('.views-field-pms-color-data');
  const $viewsFieldNameContent = $(this).find('.views-field-name .field-content').text();
  const imageSrc = $viewsFieldPmsColorData.data('src');
  const hex = $viewsFieldPmsColorData.data('hex');

  const additionalColorData = {
    [$viewsFieldNameContent]: {
      'name': $viewsFieldNameContent,
      'hex': hex,
      'src': imageSrc
    }
  };

  // Получаем значение атрибута "data-custom-attribute"
  const currentAttr = $('.field--name-field-pms-colors').attr('data-custom-attribute');
  // Если значение существует...
  if (currentAttr) {
    // Преобразуем значение в объект
    const obj = JSON.parse(currentAttr.replace(/"/g, '"'));
    // Объединяем объекты
    Object.assign(additionalColorData, obj);
  }
  console.log('additionalColorData', additionalColorData);

  const additionalColorDataString = JSON.stringify(additionalColorData).replace(/"/g, '"');
  $('.field--name-field-pms-colors').attr('data-custom-attribute', additionalColorDataString);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>

  <li class="ui-menu-item">
    <span class="views-field views-field-field-image" style="background: rgb(0, 0, 0);">
      <span class="field-content">
        <img loading="lazy" src="Чёрная картинка.png" width="32" height="32" alt="" typeof="Image">
      </span>
    </span>
    <span class="views-field views-field-name">
      <span class="field-content">Black</span>
    </span>
    <span class="views-field views-field-field-hex" style="display: none;">
      <span class="field-content">#000000</span>
    </span>
    <span class="views-field views-field-nothing">
      <span class="field-content">
        <div class="views-field-pms-color-data" data-src="Чёрная картинка.png" data-hex="#000000"></div>
      </span>
    </span>
  </li>

  <li class="ui-menu-item">
    <span class="views-field views-field-field-image" style="background: rgb(211, 212, 222);">
      <span class="field-content">
        <img loading="lazy" src="Серая картинка.png" width="32" height="32" alt="" typeof="Image">
      </span>
    </span>
    <span class="views-field views-field-name">
      <span class="field-content">Metallic Silver</span>
    </span>
    <span class="views-field views-field-field-hex" style="display: none;">
      <span class="field-content">#D3D4DE</span>
    </span>
    <span class="views-field views-field-nothing">
      <span class="field-content">
        <div class="views-field-pms-color-data" data-src="Серая картинка.png" data-hex="#D3D4DE"></div>
      </span>
    </span>
  </li>

  <li class="ui-menu-item">
    <span class="views-field views-field-field-image" style="background: rgb(255, 0, 0);">
      <span class="field-content">
        <img loading="lazy" src="Красная картинка.png" width="32" height="32" alt="" typeof="Image">
      </span>
    </span>
    <span class="views-field views-field-name">
      <span class="field-content">Red</span>
    </span>
    <span class="views-field views-field-field-hex" style="display: none;">
      <span class="field-content">#FF0000</span>
    </span>
    <span class="views-field views-field-nothing">
      <span class="field-content">
        <div class="views-field-pms-color-data" data-src="Красная картинка.png" data-hex="#FF0000"></div>
      </span>
    </span>
  </li>

</ul>

<div class="field--name-field-pms-colors" style="width: 200px; height: 150px; border: 1px solid #000;"></div>