JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://bgrins.github.io/spectrum/spectrum.css">
<script src="http://bgrins.github.io/spectrum/spectrum.js"></script>
<a href='http://bgrins.github.com/spectrum'>Spectrum Homepage</a>

<h2>First</h2>
<input type='text' class="full" id="first"/>

<h2>Second</h2>
<input type='text' class="full" id="second"/>

JavaScript

// define your color picker object in a variable
    var rules = {
            color: false,
            flat: false,
            showInput: true,
            allowEmpty: false,
            showInitial: false,
            showPalette: true,
            showPaletteOnly: false,
            hideAfterPaletteSelect: false,
            showSelectionPalette: true,
            localStorageKey: false,
            showAlpha: true,
            palette: [
                ["#000", "#444", "#666", "#999", "#ccc", "#eee", "#f3f3f3", "#fff"],
                ["#f00", "#f90", "#ff0", "#0f0", "#0ff", "#00f", "#90f", "#f0f"],
                ["#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#cfe2f3", "#d9d2e9", "#ead1dc"]
            ]
        };

    // use and add other key value pair it inside the color picker with $.extend method

        // first id
        $("#first").spectrum(        
         $.extend(rules, {
            color: "green",
            localStorageKey: "first",
            move: function (color) {
                alert();
            }
         })
        );
        
        // second id
        $("#second").spectrum(
            $.extend(rules, {
            color: "orange",
            localStorageKey: "second",
            move: function (color) {
                // Perform Some Code
            }
            })
        );