JSFiddle - React, Tailwind, and code Playground

by swaroop206

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.office24by7.com/add-templates/colorpicker.css">
<link rel="stylesheet" href="https://cdn.office24by7.com/add-templates/gradX.css">
<script src="https://codologic.com/page/sites/all/files/gradx/dom-drag.js"></script>
<script src="https://codologic.com/page/sites/all/files/gradx/colorpicker/js/colorpicker.js"></script>
<script src="https://cdn.office24by7.com/add-templates/gradX.js"></script>
<button class="clkbtn">
click
</button>
<div class="appenddiv">


</div>

CSS

.targets {
                margin:0 auto;
                text-align: center;
                border: 1px solid #ccc;
                background: #f8f8f8;
                margin: 0 auto;
                border-radius: 4px;
                width:auto;
                padding:10px;
            }

            .target_text {
                margin: 0px auto;
                margin-top: 40%;
                background: #f8f8f8;
                width: 70px;
                border: 1px solid #ddd;
                padding: 2px;
                border-radius: 2px;
                color: #111;
            }

            .target {
                border: 1px solid;
                margin: 0px 10%;
                width: 150px;
                height: 150px;
                display:inline-block;
            }
            #target {
                border-radius: 150px;
            }

            .result {
                text-align: center;
                text-transform: uppercase;
                font-weight: bold;
                padding:12px;
                padding-left: 15px;
                margin: 10px 0px;
                border: 1px solid #ddd;
                background: #f8f8f8;
            }


            .clrpik {
                height: 200px; 
                margin: 100px 34%;            
            }

JavaScript

$(document).ready(function(){
var i=0;
$(".clkbtn").click(function(){
$(".appenddiv").append('<div class="target"><div class="target_text">Click Here for gradient</div></div>');

    $(".target").one('click', function(){
       $('.appenddiv').append("<div id='clrpik"+i+"'></div><script>$(document).ready(function(){gradX('#clrpik"+i+"', {targets['.target']});});</"+"script>");
       i++;
    });
      });
    
});