Eine id hinzufügen, wie?

Hy, ich habe folgendes problem,

ich möchte mit JS eine bilderreihe erstellen. Ich schaffe es, die anzahl der bilder darzustellen ( auch änderbar). Jedes erstelle "Quadrat" soll eine eine Id bekommen damit ich sie dann später nutzen kann. Classen hinzufügen funktioniert ohne probleme aber eine id hinzufügen keine chance. Ich möchte durch ein array: name = [ x, y, z, a, b, c ]; die namen verteilen. Im internet habe ich nichts gefunden das mir helfen könnte. Ich bitte euch um hilfe! (Ich bin noch ein anfänger in js und in jQuery hab ich kurz reingeschnuppert)

https://codepen.io/Noobie_Chan/pen/MWwbyxV

Mfg

let knights = [ x, y, z, a, b, c ]; // x, y, etc. sind dann die namen von den chars

Jedes bild muss eine ID bekommen. Bin der meinung durch ein array könnte ich am besten verschiedene id-namen vergeben. (id sollen dann später dienen für ein onklick). Und es gibt nur 1 Bild datei. (sprites) Die muss dann später mit x-achse, y-achse verschoben werden. Das wäre dann mein 2tes problem wie ich die Position verschieben könnte.

Danke für deine hilfe,

es ist doch so einfach aber dennoch so schwer gewessen :D. jetzt muss ich mir überlegen wie ich dieser id die position des bild verschieben kann, die Positionen hab ich schon ausgerechnet.

ok, habe es in codepen nochmal aktualisiert. Mit einem testbild, zeigt immer noch die selbe position an.

https://codepen.io/Noobie_Chan/pen/MWwbyxV

________________________________________________________

Falsch:

image.style.backgroundPosition = '"' + x + '%' + y + '%' + '"';

Lösung:

image.style.backgroundPosition = x + '% ' + y + '%';