show toggle button на пользовательском вводе

Question

Я пытался без успеха добавить кнопку переключения на пользовательский ввод. это кнопка для переключения шрифтов.

вот мое перо: http://codepen.io/lucky500/pen/bdpzbd и код.

 <div id="list" class="greatList clearfix" > 
     <ul class="greatList" style='display: none;'> 
      <li class="items"> 
       <div class="box"> 
        <i class="fa fa-toggle-on fa-2x active" id="on"></i> 
        <i class="fa fa-toggle-on fa-2x fa-rotate-180 inactive" id="off" style='display: none;'></i> 
       </div> 

      </li> 
     </ul> 
    </div> 

Jquery

$(document).ready(function(){ 

    //toggler 

    $('.box').click(function() { 
     $('.inactive, .active').toggle(); 
    }); 


    var trash = '<span class="delete">X</span>'; 
    var toggleButton = '<div class="box"></div>'; 


    //To allow the user to use enter 
$('#addButton').click(function(e){ 
    e.preventDefault(); 
    var item = $('#addItems').val(); 
    var placeIt = $('<li style="display: block;">' + toggleButton + item + trash + '</li>'); 

    if(!$.trim($('#addItems').val())) { 
     alert('Please enter text to add to the list'); 
    } else { 
     $('.greatList').append(placeIt); 

    }; 
}) 

//To remove li when .trash is clicked 
$(document).on('click', '.delete', function() { 
    $(this).closest('li').fadeOut(350); 
}); 

});

вся помощь приветствуется!

Answer 1

Мне просто нужно было добавить ярлык i с моим переключателем внутри моего toggleButton var ... теперь, пытаясь заставить мой переключатель работать!

var toggleButton = '<div class="box" style="display: block;"><i class="fa fa-toggle-on fa-2x active" id="on"></i></div>';