JSFiddle - React, Tailwind, and code Playground

by ozzan

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<input id="pass">
<button>
    Stringify
</button>
<ul id="icons">
    <li class="icon">&#9824;</li>
    <li class="icon">&#9742;</li>
    <li class="icon">&#9743;</li>
    <li class="icon">&#9744;</li>
</ul>

CSS

ul li {
    list-style: none;
    display: inline;
}

.active {
    background-color: red;
}

JavaScript

$('#icons li').click(function() {
    $(this).toggleClass("active");
    $("#pass").val($("#icons li.active").text());
});

$("button").on("click", function() {
    $("#pass").val($("#pass").val().replace(/(.)/g, function(char) {
        return "&#" + char.charCodeAt() + ";";
    }));
});