How to do it?

const cDB = [

test = {
appearance: 'https://image2url.com/images/1763839967613-ad7e3cd4-3f49-4c59-bc5c-ad19b3748757.jpg',
bg: '',

col1: '#fff',
col2: '#000',
col3: '#777',

name: 'Syrian Presster',
uname: 'SyPress',
about: 'Detailed big description',

gender: g1,
species: 'Wolf',
occupation: 'Militar',

likes: 'Meat, Nature, Water',
dislikes: 'People, Fire',

detailedStats: {
strength: 70,
speed: 50,
agility: 80,
resistance: 60,
defense: 40,
dexterity: 75,

confidence: 65,
intellect: 78,
empathy: 40,
charisma: 55,
patience: 30,
temper: 45,
humor: 70,
creativity: 82,
kindness: 60,
curiosity: 73,
imagination: 88,
resilience: 69,
optimism: 50,
honesty: 90, }

relations: [],
rel: [], }, ];

The cDB needs the variables, there is no such thing as 1 character, it makes no sense to have 50 items thrown without identification, it has to be like this:

CharacterA = { Data ONLY for Character A }
CharacterB = { Data ONLY of Character B }
CharacterC = { Data ONLY of Character C }

The cDB is the "bank" that keeps everything together, but they are all Independent, not independent variables thrown, each one belongs to a Character, but they all belong to the Bank, is to go to cDB and search the ID, no to go randomly to every folder searching to file.js file2.js and are stored in it.

This makes no sense at all:

const cDB = [
{ data here },
{ data here},
{ data here} ];

Given what? Whose? Whence? Which?

But it doesn't work when I create the Bank:
const cDB = [];

And in it I put the items:
character1 = {}

None of them work:
character1 {}
character1: {}
character1 === {}
character1 > {}
character1 : {}

The code does not seem to find the items within the variable that have other variables;

const id = item.dataset.char;
const data = cDB[id]?? {};

This defines the styles, each character is styled with its own palette, no item is rigid, just the style of the page and how everything fits, texts, colors, effects, everything is different for each one. It does not find the data inside the cDB.