html - add color picker on top of an appended child

Question

So I have a script that will add a text box and I want to add on top of that text box a color wheel also I'm using electron if this helps. Any help is appreciated!

<input class="addcommandbtn" type="button" id="addCommand" style="width: 6.5%;" value="+ Command">
<select name="commandslist" id="commandslist" size="18%" style="height: 59%;width: 15%; display: block; border: 1px solid #dcdcdc; border-radius: 6px; margin-top: 5px;"></select>
 <script>
        function createCommandField() {
            var input = document.createElement('option');
            input.style.marginTop = "1%";
            input.textContent = "command";
            input.name = 'Commands[]';
            input.style.display = 'block'
            input.style.boxShadow = 'inset 0px 1px 0px 0px #ffffff';
            input.style.border = '1px solid #dcdcdc';
            input.style.borderRadius = '6px';
            input.style.height = "2%";
            input.style.padding = '5px 30px';
            input.style.fontFamily = "Arial";
            input.style.fontWeight = "bold";
            input.style.fontSize = "17px";
            return input;
        }
   var select = document.getElementById('commandslist');
        document.getElementById('addCommand').addEventListener('click', function (e) {
            select.appendChild(createCommandField());
        });

</script>

Answer 1

here is a jquery script to get the color input changed on EDITED: selected option double click

added a function to apply selected color on the background of the same selection and un-select it to c the effect,

goodluck,

function createCommandField() {
  var input = document.createElement('option');
  input.style.marginTop = "1%";
  input.textContent = "command";
  input.name = 'Commands[]';
  input.style.display = 'block'
  input.style.boxShadow = 'inset 0px 1px 0px 0px #ffffff';
  input.style.border = '1px solid #dcdcdc';
  input.style.borderRadius = '6px';
  input.style.height = "2%";
  input.style.padding = '5px 30px';
  input.style.fontFamily = "Arial";
  input.style.fontWeight = "bold";
  input.style.fontSize = "17px";

  return input;

}

$(document).ready(function() {
    var bgclr ='';
    var parentopt = $('#pckrbg');
  $('#commandslist').change(function() {
    var crntslct = $('#commandslist').children('option:selected');
    crntslct.dblclick(function() {
        parentopt.click();
        parentopt.change(function(){
            bgclr = parentopt.val();
            $('#commandslist').prop("selectedIndex", function(){
                $(this).children('option:selected').css("background", bgclr); //set background
                $(this).children('option:selected').prop("selected", false); //deselect option;
            });
        });     
    });
  });
});

var select = document.getElementById('commandslist');
document.getElementById('addCommand').addEventListener('click', function(e) {
  select.appendChild(createCommandField());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span><input type="color" value="#FFEE00"  id="pckrbg" name="colorz" style="position:relative; display:none; float:left; margin-right:1rem; bottom:3px;"></span>
<form class="myformclass" style="font-family: sans-serif;font-size:20px;" id="myForm" onsubmit="return validateForm()">
  <input class="addcommandbtn" type="button" id="addCommand" style="width: 6.5%;" value="+ Command">
  <input class="addcommandbtn" type="button" id="removeCommand" style="width: 7.2%;" value="- Command" onclick="removeCommandFunc()">
  <input class="savebtn" type="button" id="saveCommands" style="width: 4%; float: right;" value="Save" onclick="SaveToLocalStorage()">
  <!-- Retrive Button <input class="Retrive" type="button" id="Callback" value="Retrive From LocalStorage" style="float:right;margin-right:3rem;" > -->
  <select name="commandslist" id="commandslist" size="5%" style="width: 50%; display: block; border: 1px solid #dcdcdc; border-radius: 6px; margin-top: 5px;"></select>
  <select name="resplist" id="resplist" size="18%" style="height: 20%;width: 59%; display: block; border: 1px solid #dcdcdc; border-radius: 6px; margin-top: 5px; margin-left: 20%;"></select>
</form>