Cannot set Spectrum Color Picker

I have this in my code:

      function getInput(id) {
             var html = "<input id='" + id + "'/>";
             return $(html);
      }


      function getControlUploadWrapper(id) {
            var html = '<div class="input-group">' +
    '                       <div class="input-group-prepend">' +
    '                            <span class="input-group-text" id="inputGroupFileAddon01" style="height: 29px;">Upload</span>' +
    '                       </div>' +
    '                       <div class="custom-file">' +
    '                           <input id="' + id + '" type="file" class="custom-file-input" id="inputGroupFile01"' +
    '                           aria-describedby="inputGroupFileAddon01">' +
    '                           <label class="custom-file-label" 
                                for="inputGroupFile01">Choose file</label>' +
    '                       </div>' +
    '                   </div>';
            return $(html);
      }

      function setupBackgroundControls(jObj, key, sT, type, val, targetEl) {
           var sKey = "tab" + type + getStyleKey(sT);
           var id = type + sT.replace("-", "");

           $("#" + sKey).append($(getControlColsWrapper(12, "height:30px;").append($(getControlColsLabelWrapper()).append(getInput(id)))));
           setColorPickerControlEvents(jObj, sT, type, val, id, targetEl);

           $("#" + sKey).append($(getControlColsWrapper(6, "height:30px;").append($(getControlUploadWrapper("control_" + id)))));
           $('#control_' + id).change(function () {
                  var input = this;
                  var url = $(this).val();
                  var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
                  if (input.files && input.files[0] && (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) {
                         var reader = new FileReader();
                         reader.onload = function (e) {
                               var guid = uuidv4().replace("-", "") + "." + ext;
        
                               AjaxResult(function (obj, data) {


                                     $("#" + id).spectrum("set", null); <-- this is where the $("#" + id) keeps returning null so i cannot set the spectrum value


                               }, "UploadComponentImage", { projectId: projectId, src: e.target.result, guid: guid, oldImage: getComponentDataAllStyleValueByResponsiveIndex(jObj, sT, type, getResponsiveIndex())}, methodRequestR.POST);


                          }
                          reader.readAsDataURL(input.files[0]);
                  }

           });

      }

      function setColorPickerControlEvents(jObj, sT, type, val, id, targetEl) {
             $("#" + id).spectrum({
                  allowEmpty: true,
                  color: val == null || val == "unset" ? null : val,
                  change: function (color) {
                       if (color == null) {
    
                       } else {
                            $("#control_" + id).parent().parent().parent().show(); <-- also here, the $("#control_" + id) selector is null or empty
                       }
                  }
             });
      }

So this part of the code:

     $("#" + id).spectrum("set", null);

Keeps returning null or the selector is empty:

     $("#" + id)

But Spectrum has been set here:

     $("#" + sKey).append($(getControlColsWrapper(12, "height:30px;").append($(getControlColsLabelWrapper()).append(getInput(id)))));
     setColorPickerControlEvents(jObj, sT, type, val, id, targetEl);

So why do i keep getting null or empty selector here?

     $("#" + id).spectrum("set", null);

Also at this point:

     $("#control_" + id).parent().parent().parent().show();

The $(“#control_” + id) selector keeps returning null or empty
But i have set this here:

     $("#" + sKey).append($(getControlColsWrapper(6, "height:30px;").append($(getControlUploadWrapper("control_" + id)))));

Just to get an idea I have a screenshot, part of the UI where these functions are in use:

enter image description here