title: how to dynamically select a color from a color picker by using jquery?
body: <p>I have a form which is must sending some data in the database and the data is a name of the product and the important part is the spec details which is the user will enter the spec name and choose its color, i didn't faced a problem to generate the spec input but faced a problem in the color picker part
  it must be do the following : when i click the color button it will show the color picker pallet and when i select the color it will do 2 things the first is change the color of the icon in <strong><em>this</em></strong> clicked button and the second one is to but the value in the selected color in a hidden input type i'm trying to dynamically generate the color picker but its a little bit buggy. note:- i'm using this <a href="https://www.npmjs.com/package/a-color-picker" rel="nofollow noreferrer">color picker</a></p>
  
  <p>and the code is in the following <a href="https://codepen.io/amr4web/pen/ZEbWWWG" rel="nofollow noreferrer">https://codepen.io/amr4web/pen/ZEbWWWG</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
    if ($(".addColor").length) {
      // start add color
      $(document).on("click", ".addColor", function (e) {
        e.preventDefault();
        var thisBtn = $(this);
        thisBtn.siblings(".colorPickerContainer").toggleClass("active my-3");
        AColorPicker.from(".picker").on("change", function (picker, color) {
          thisBtn.children(".icon").css("color", color);
          thisBtn.children("input").val(color);
        });
      }); //end add color
    } // end color picker
    
     $(document).on("click", ".addProduct",function(e){
       var productContent =' &lt;div class="singleSpec"&gt; &lt;label&gt;spec name &lt;input type="text" name="color" value=""&gt; &lt;/label&gt; &lt;div class="col-lg-6 col-12"&gt; &lt;button class="addColor"&gt;&lt;span class="icon"&gt;&lt;i class="fas fa-palette"&gt;&lt;/i&gt;&lt;/span&gt; add color &lt;input type="hidden" name="color" value=""&gt; &lt;/button&gt; &lt;div class="colorPickerContainer"&gt; &lt;div class="picker" acp-color="#ffffff" acp-show-rgb="yes" acp-show-hsl="yes" acp-show-hex="yes"&gt; &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';
       $(".productsContainer").append(productContent);
     });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: #efe9e7;
  }
  body .colorPickerContainer {
    height: 0;
    position: absolute;
    overflow: hidden;
    display: block;
    left: 0;
    top: 100%;
    background-color: #eeeeee;
    transition: 0.8s;
  }
  body .colorPickerContainer.active {
    height: auto;
    top: auto;
    z-index: 9999;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(3, 1, 1, 0.08);
  }
  body .colorPickerContainer.active .picker {
    z-index: 99999;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/a-color-picker@1.1.8/dist/acolorpicker.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/&gt;
  &lt;form action="#" class="productsContainer"&gt;
       &lt;label&gt;Product name
        &lt;input type="text" name="color" value=""&gt; &lt;/label&gt;
    &lt;div class="singleSpec"&gt;
      &lt;label&gt;spec name
        &lt;input type="text" name="color" value=""&gt; &lt;/label&gt;
      &lt;div class="col-lg-6 col-12"&gt;
        &lt;button class="addColor"&gt;
          &lt;span class="icon"&gt;&lt;i class="fas fa-palette"&gt;&lt;/i&gt;&lt;/span&gt;
          add color
          &lt;input type="hidden" name="color" value=""&gt;
        &lt;/button&gt;
        &lt;div class="colorPickerContainer"&gt;
          &lt;div class="picker" acp-color="#ffffff" acp-show-rgb="yes" acp-show-hsl="yes" acp-show-hex="yes"&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  &lt;button class="addProduct"&gt;
    add new product
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>