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

Пожалуйста, потерпите меня, потому что я не знаю, как объяснить это короче. Вся информация, которую я публикую здесь, является просто примером, поэтому она звучит странно. Итак, я хотел иметь своего рода страницу выбора персонажа, и я хотел отображать атрибуты каждого персонажа в отдельном div, когда вы нажимаете на портрет персонажа. Определенные данные будут отображаться в разделе карточки персонажа.

По сути, у меня есть список портретов персонажей, например этот [html]:

<ul id="char-list">
  <li id="greengirl">Green Girl</li>
  <li id="maroonman">Maroon Man</li>
  <li id="whitwoman">White Woman</li>
  <li id="blackboy">Black Boy</li>
</ul>

<div id="char-card">
  <div id="char-name"></div>
  <div id="char-hair-color"></div>
  <div id="char-eye-color"></div>
  <div id="char-mag-power"></div>
</div>

Все символы имеют, например, три атрибута: hair-color, eye-color и magical-power. Я хочу отобразить это в #character-card div, когда пользователь нажимает на каждый символ.

Теперь я знаю, что могу установить data-attribute для каждой характеристики персонажа следующим образом:

  ...
  <li id="greengirl" data-eye-color="Green" data-hair-color="Green" data-mag-power="322">Green Girl</li>
  ...

И напишите мой jQuery следующим образом:

$('#char-list li').on('mouseup', function() {
  var eyeColor = $(this).data('eye-color'),
      hairColor = $(this).data('hair-color'),
      magPower = $(this).data('mag-power'),
      charName = $(this).text(),
      nameDiv = $('#char-name'),
      hairDiv = $('#char-hair-color'),
      eyeDiv = $('#char-eye-color'),
      magDiv = $('#char-mag-power');

  nameDiv.text(charName);
  hairDiv.text(hairColor);
  eyeDiv.text(eyeColor);
  magDiv.text(magPower);
});

Это работает без проблем, но я пытаюсь сделать что-то довольно сложное, и у каждого персонажа есть много данных, включая цитату для каждого персонажа, 4 значка способностей, здоровье, мана, защита и т. д., и я просто не знаю. Не думаю, что размещение их всех в атрибутах данных для каждого элемента было бы эффективным. Если бы я следовал этому методу, мне пришлось бы редактировать сам html, а это означало бы очень длинный и запутанный html. Я уже нашел один хороший способ упростить применение некоторых атрибутов с помощью jQuery:

var greenHairList = '#greengirl, #blueboy'
...
$(greenHairList).attr('data-hair-color', 'Green')

Таким образом, он будет применяться через jQuery, оставляя мой html чистым и незагроможденным. Тем не менее, это все еще использует атрибуты данных. Я был бы рад, если бы были другие способы добиться того, чего я хочу, с минимальным использованием атрибутов данных и решением моей проблемы с помощью character-card div. Спасибо всем, кто может помочь!