How to select and manipulate the dynamically created html element with javascript?

I am pretty new to js, and I am building a color scheme generator as a solo project.
I am now stuck on select the html element that created dynamically.
I tried to select both labels and inputs element below, using document.getElementByClassName but it gives me that element I selected ‘undefined’

Click to copy!
`

I wanna select multiple labels and multiple inputs elements and add a clickEvent so that user can copy the resultColor code from both label and input

function renderColor(){

    //to store result of color scheme set object

      resultColorDivHtml = resultColorSchemeSet.map((resultColorItem) => {
        return `<div class="result-color" style="background-color: ${resultColorItem};"></div>`;
      }).join('')

      resultCodeDivHtml = resultColorSchemeSet
        .map((resultColor) => {
          return `
                    <label for='${resultColor}' class='copy-label'>Click to copy!</label>
                    <input class='result-code' id='${resultColor}' type="text" value='${resultColor}'/>`;
        })
        .join("");

        
      resultColorDiv.innerHTML = resultColorDivHtml;
      resultColorCodeDiv.innerHTML = resultCodeDivHtml;

}