The below code i have written to apply color on different note but the issue is these statements are giving me null when i console log them which i don't understand Why? As they are working quite fine.

Here is the code use to design notes:

function showNote2() {
    console.log("Show");
    let note = localStorage.getItem("notes");
    if(note == null){
        noteData = []
        // message.innerText = "Please Add a Note"
    }
    else{
        noteData = JSON.parse(note);
    };
    let showBox = "";
    let color1 = "";
    noteData.forEach(function show(element, index) {
        // localStorage.setItem(`clr${index}`, color)
        color1 = localStorage.getItem(`clr${index}`);
        // console.log(color1)
        showBox += `<div class="noteCard my-2 mx-2 card" id="cardID" style="width: 18rem;">
        <select id="mySelect${index}" class="clr-btn" style="text-align:center" onchange="changeColor(${index})">
        <option id="bckgrnd-clr" value="white">Background Color</option>
        <option id="clrR" value="Red">Red</option>
        <option id="clrG" value="Green">Green</option>
        <option  id="clrB" value="Blue">Blue</option>
        </select>
                <div class="card-body" id="card${index}" style="background-color:${color1}">
                  <h5 class="cardtitle">Note
                  ${index + 1}
                  </h5>
                  <p class="card-text"> 
                  ${element}
                  </p>
                  <button id="${index}" onclick="deleteNote(this.id)" class="btn btn-primary">Delete Note</a>
                </div>
              </div>   `
            });

    console.log(color1)    
              let showNote3 = document.getElementById("notes2");
              if(noteData.length != 0){
                  showNote3.innerHTML = showBox;
              }else{
                  showNote3.innerHTML = "Please add a Note"
              };
            //   Color()
            //   changeColor()
            
        };

And here is the code which gives option to choose different color for different notes:

let clrstore;
function changeColor(index) {
    console.log("Change");
    let note = localStorage.getItem("notes");
    if(note != null ){
        // let showNote3 = document.getElementById(`card4${index}`);
        // console.log(showNote3);
        let diffColorApply = document.getElementById(`card${index}`);
        console.log(diffColorApply);
        let elm1 = document.getElementById(`mySelect${index}`);
        console.log(elm1);
        let color = elm1.options[elm1.selectedIndex].value;
        colorApply.style.backgroundColor = color;
        clrstore = localStorage.setItem(`clr${index}`, color)
    }
    else{
        `Note is Empty`;
    }
}

console.log(diffColorApply); and console.log(elm1); returns null which is causing issue in executing another function. Also let color = elm1.options[elm1.selectedIndex].value; this error reading options Don't know Why? As it is working quite fine.