Count number of input fields with value with jQuery -

i have script automatically generates new text field when previous 1 being filled, automatically advances cursor next when user types in exclamation mark. works well. now, i'd add line below last text field shows number of these input boxes have been created , have content. help?

<div id="mydiv">     <input type="text" name="qr[]" id="txt_1" class="qr" autofocus /> </div> <script> $('#mydiv').on('keyup', 'input', function(e) {   if ($(this).val() == '') {     $(this).next().remove();     return;   } else if ($(this).next().val() == '') {     if (e.keycode === 49 && e.shiftkey) {       $(this).next().focus();     }     return;   }    addnewtxt($(this)); });  $('#mydiv').on('paste', 'input', function(e) {   e.preventdefault();   var text = (e.originalevent || e).clipboarddata.getdata('text/plain');    if (!text) {     return;   }    var textsections = text.split('!');    $(this).val(textsections[0]);   var lastel;   (var = 1; < textsections.length; i++) {     lastel = addnewtxt($(this), textsections[i]);   }    lastel.focus(); });  function addnewtxt(el, val) {   var newtxt = el.clone();   var id = newtxt.attr('id');   newtxt.attr('id', 'txt_' + (parseint(id.substring(id.indexof('_') + 1))));   newtxt.val(val || '');   el.parent().append(newtxt);    return newtxt; }</script> 

here do.

first add div below div containing inputs:

<div id="mydiv">     <input type="text" name="qr[]" id="txt_1" class="qr" autofocus /> </div> <div id="numinputs">     number of inputs: 1 </div> 

then in javascript few things:

add var track number of inputs - initialize 1

var numinputs = 1; 

after add input increment var

numinputs++; 

after incrementing var use jquery change html of numinputs div display number user

$('#numinputs').html("number of inputs: " + numinputs);