动态添加删除真棒字体以跨度？

Question

I am trying to add font awsome dynamically based on whether the user input any data into the inputs or not. As you can see, if the user hasn't input anything I want to show the 'x' font awesome and as user finish typing I want to show the 'check' font awesome. I have tried append and other ways, none seems to work. as

I use keyup so it dynamically change if the user delete some text later

 jQuery(document).ready(function () { $('.pm-text_field').keyup(function () { var empty = false; $('.pm-text_field').each(function () { if ($(this).val().length == 0) { empty = true; } }); if (empty) { $("#pm-checkbox").html('<i class="fa fa-check"></i>'); } else { $('#pm-checkbox').html('<i class="fa fa-times"></i>'); } }); }); 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-sm-6"> <input class="pm-text_field" name="" placeholder="Practice Name" type="text" required> </div> <div class="col-sm-6"> <input class="pm-text_field" name="" placeholder="TAX ID #" type="text" required> </div> <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-accordion-header-active ui-state-active ui-corner-top" role="tab" id="ui-accordion-accordion-header-0" aria-controls="ui-accordion-accordion-panel-0" aria-selected="true" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span><a href="#">1. Practice Membership applications</a><span id="pm-checkbox" class="pull-right pm-tickmark"></span></h3> 

Answer 1

 $('.pm-text_field').keyup(function(){ var empty=false; $('.pm-text_field').each(function(){ empty = $(this).val().length<=0?false:true; if(!empty) return false; }); empty?$('.InputSec').next().html('<i class="fa fa-check"></i>'):$('.InputSec').next().html('<i class="fa fa-close"></i>'); }); 

 .InputSec{width:180px;float:left} .InputSec + div{ width:50px; float:left; font-size:35px; height:30px;} .fa.fa-close{color:pink;} .fa.fa-check{color:lightgreen;} 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="InputSec"> <input class="pm-text_field" placeholder="Practice Name" type="text" ><br> <input class="pm-text_field" placeholder="TAX ID #" type="text" ><br> </div> <div><i class="fa fa-close"></i></div> 

Answer 2

You have reversed the icons! They should be like this :

if (empty) {
   $("#pm-checkbox").html('<i class="fa fa-times"></i>');
} else {
   $('#pm-checkbox').html('<i class="fa fa-check"></i>');
}

 jQuery(document).ready(function () { $('.pm-text_field').keyup(function () { var empty = false; $('.pm-text_field').each(function () { if ($(this).val().length == 0) { empty = true; } }); if (empty) { $("#pm-checkbox").html('<i class="fa fa-times"></i>'); } else { $('#pm-checkbox').html('<i class="fa fa-check"></i>'); } }); }); 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-sm-6"> <input class="pm-text_field" name="" placeholder="Practice Name" type="text" required> </div> <div class="col-sm-6"> <input class="pm-text_field" name="" placeholder="TAX ID #" type="text" required> </div> <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-accordion-header-active ui-state-active ui-corner-top" role="tab" id="ui-accordion-accordion-header-0" aria-controls="ui-accordion-accordion-panel-0" aria-selected="true" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span><a href="#">1. Practice Membership applications</a><span id="pm-checkbox" class="pull-right pm-tickmark"></span></h3>