javascript - Jquery Count Elements By Class Returning Wrong Numbers -

what doing when checkbox checked appending id,charges , test name in hidden fields when count before adding appending new hidden fields giving me wrong numbers, dont know why

here jquery code:

$("input.checkboxtests").live('change', function () {     var charges = $('#sample-table-3').find('td.testcharges#' + this.id).html();     var testname = $('#sample-table-3').find('td.testname#' + this.id).html()     if (this.checked) {         $("#selectedteststable").find('tbody')             .append($('<tr>')             .attr('id', this.id)             .attr('class', "bookedtest")             .append($('<td>')             .append($('#sample-table-3').find('td.testname#' + this.id).html()          )));         var testidindex = $("input.ihiddentestid").length;         var checkingindex = $("input.ihiddencheck").length         $('input.ihiddencheck').each(function () {             console.log("checking id:" + $(this).id + ", value:" + $(this).val() + "count:" + checkingindex);         });         var newtestid = $("<input id='" + this.id + "' type='hidden' value='" + this.id + "' class='ihiddentestid' name='tests[" + testidindex + "].testid' />");         $("form#imgupload").append(newtestid);         $("form#imgupload").append("<input id='" + this.id + "' type='text' value='" + this.id + "' class='ihiddencheck' name='tests[" + checkingindex + "].testid' />")         var chargesindex = $("form#imgupload input.ihiddencharges").length;         var newcharges = $("<input id='" + this.id + "' type='hidden' value='" + charges + "' class='ihiddencharges' name='tests[" + chargesindex + "].charges' />");         $("form#imgupload").append(newcharges);         var testnameindex = $("form#imgupload input.ihiddentestname").length;         var newtestname = $("<input id='" + this.id + "' type='hidden' value='" + testname + "' class='ihiddentestname' name='tests[" + testnameindex + "].testname' />");         $("form#imgupload").append(newtestname);     } else {         $("#selectedteststable").find('tr#' + this.id).remove()         $("form#imgupload").find('input.ihiddentestid#' + this.id).remove();         $("form#imgupload").find('input.ihiddencharges#' + this.id).remove();         $("form#imgupload").find('input.ihiddentestname#' + this.id).remove();     } }); 

here html:

<div style="max-height:490px;overflow:auto;" class="col-lg-12" id="genrequestcontainer">  <form method="post" id="imgupload" enctype="multipart/form-data" data-ajax-success="sendrequestsuccess" data-ajax-failure="sendrequestfail" data-ajax-complete="sendrequestcomplete" data-ajax-begin="sendrequestbegin" data-ajax="true" action="/healthaccess/testrequest/sendrequest?length=11">    <input type="hidden" value="1" name="cliqpanelid">    </div> <div id="paneltestscontainer">  <h3 class="header smaller lighter blue">lab tests</h3>   <div class="row"> <div style=" height:80%; overflow:auto;" class="col-lg-8"> <div class="table-header"> results lab tests </div>  <div style="height:170px;padding-right: 0px !important; padding-left: 0px !important;" class="col-lg-12">   <div role="grid" class="datatables_wrapper" id="sample-table-3_wrapper"><div class="row"><div class="col-sm-6"></div><div class="col-sm-6"><div class="datatables_filter" id="sample-table-3_filter"><label>search: <input type="text" aria-controls="sample-table-3"></label></div></div></div><table class="table table-striped table-bordered table-hover datatable" id="sample-table-3" aria-describedby="sample-table-3_info">     <thead>         <tr role="row"><th class="center sorting" role="columnheader" tabindex="0" aria-controls="sample-table-3" rowspan="1" colspan="1" aria-label="          : activate sort column ascending">          </th><th class="sorting" role="columnheader" tabindex="0" aria-controls="sample-table-3" rowspan="1" colspan="1" aria-label="             test name         : activate sort column ascending">             test name         </th><th class="sorting" role="columnheader" tabindex="0" aria-controls="sample-table-3" rowspan="1" colspan="1" aria-label="             charges         : activate sort column ascending">             charges         </th></tr>     </thead>   <tbody role="alert" aria-live="polite" aria-relevant="all"><tr class="odd">         <td class="center ">         <label>         <input type="checkbox" class="ace checkboxtests" id="1668">         <span class="lbl"></span>         </label>         </td>         <td class="testname " id="1668">b.p (                   /</td>         <td class="testcharges " id="1668">230</td>       </tr><tr class="even">         <td class="center ">         <label>         <input type="checkbox" class="ace checkboxtests" id="1031">         <span class="lbl"></span>         </label>         </td>         <td class="testname " id="1031">cbc &amp; esr profile</td>         <td class="testcharges " id="1031">280</td>       </tr><tr class="odd">         <td class="center ">         <label>         <input type="checkbox" class="ace checkboxtests" id="877">         <span class="lbl"></span>         </label>         </td>         <td class="testname " id="877">urine examination (dr)</td>         <td class="testcharges " id="877">90</td>       </tr></tbody></table><div class="row"><div class="col-sm-6"><div class="datatables_info" id="sample-table-3_info">showing 1 3 of 3 entries</div></div><div class="col-sm-6"><div class="datatables_paginate paging_bootstrap"><ul class="pagination"><li class="prev disabled"><a href="#"><i class="icon-double-angle-left"></i></a></li><li class="active"><a href="#">1</a></li><li class="next disabled"><a href="#"><i class="icon-double-angle-right"></i></a></li></ul></div></div></div></div>  </div>  </div>      <div style=" height:80%; overflow:auto;" class="col-lg-4"> <div class="table-header"> selected tests </div>  <div id="selectedtestscontainer" style="height:170px;padding-right: 0px !important; padding-left: 0px !important;" class="col-lg-12">  <table class="table table-striped table-bordered table-hover" id="selectedteststable">     <thead>         <tr>          <th>             test name         </th>     </tr>     </thead>      <tbody>           </tbody> </table> </div>  </div>       </div>      </div>     <div id="hiddencontainer">      <input type="hidden" name="dependentid" class="ihiddendependent" value="1" id="1"></div> </form>                  </div> 

i getting hidden fields count of particular class using length in jquery giving me wrong number tested appending text boxes text boxes displayed on page 3 when length class returns wrong number, stucked. all.

mabye forgot remove inputtag:

<input id="1031" type="text" value="1031" class="ihiddencheck" name="tests[0].testid"> 

you can add

$("form#imgupload").find('input.ihiddencheck#' + this.id).remove(); 

after this

$("#selectedteststable").find('tr#' + this.id).remove() $("form#imgupload").find('input.ihiddentestid#' + this.id).remove(); $("form#imgupload").find('input.ihiddencharges#' + this.id).remove(); $("form#imgupload").find('input.ihiddentestname#' + this.id).remove();