javascript - Take selected icon list values into an input box -

i'm new js , i'm trying make password generator using icons. it's designed click on number of icons in list , hex code put input box. 2 important bits:

• the hex codes appear in input box same no matter order selected icons in.
• you can toggle , untoggle icons.

here code far:

https://jsfiddle.net/uvzb8a6s/1/

html

<input id="pass"> <ul id="icons"> <li class="icon">&#9824;</li> <li class="icon">&#9742;</li> <li class="icon">&#9743;</li> <li class="icon">&#9744;</li> </ul> 

js

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

how value of active li's listed input box, (if had clicked icon 3 , icon one:

♠☏ 

• select li elements has active class li.active
• get texts .text() method.
• set input's value .val(value) method.

additionally:

• to html entity string instead of characters inside input, can replace each character entity string making use of string.charcodeat() method. see stringify button in example.

$('#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() + ";";    }));  });

ul li {    list-style: none;    display: inline;  }  .active {    background-color: red;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.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>

updated jsfiddle