Unique ID and array usage

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 color = {
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))