Se supone que el usuario debe pegar un código hexadecimal en una entrada que luego se usa con una identificación única. No quiero que esa identificación cambie y la estoy agregando a un código HTML que estoy haciendo con JS. Lo que no funciona es usar el código hexadecimal de la matriz en clases color-block y hex

 let colorp1 = []; let colorhexmaker = $("#color-hex-maker"); let preset1colordiv = $("#preset1-color-div") let color = { id: Date.now(), hex: colorhexmaker.val() } colorp1.push(color) colorp1.forEach((item, i) => { item.id = i + 1; }); preset1colordiv.prepend(" <div class=\"color-div\">\n" + " <label>\n" + " <input maxlength=\"10\" placeholder=\"Name\" class=\"color-side-input\">\n" + " </label>\n" + " <br>\n" + " <div class=\"color-block\"></div>\n" + " <p class=\"hex\">hex</p>\n" + " </div>") $(".hex").attr("id", colorp1.filter(({id}) => id)) localStorage.setItem("ColorPreset1", JSON.stringify(colorp1))

Tengo problemas para usar la ID única, así como para no sobrescribir las otras ID al asignar la ID única.

 $(".hex").attr("id", colorp1.filter(({id}) => id))