The user is supposed to paste a hex code into an input which then gets used with a unique ID. I do not want that id to change and I am adding it to some HTML code that I am making with JS. What doesn't work is to use the hex code from the array on color-block and hex classes

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))

I am having problems getting the unique ID to be used, as well as not overwriting the other IDs when assigning the unique ID.

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