.change() Jquery not working
<p>I have a series of elements with class <code>xyz</code>. The requirement is a user needs to input one number in them only. I then need to concat them. For example, their meter would read <code>1</code> <code>2</code> <code>0</code> <code>0</code>.</p>

<p>I have below.</p>

<pre><code>$('.xyz').change(function () {
     console.log($(this));
     arrayNums.length = 0;
     var thisRead = parseInt(CombinedNumber(arrayNums), 10);
     var lastRead = parseInt($('.abcd').html(), 10);
     if ((thisRead - lastRead) &lt;= 1) {
         $('#idthing').html("Your Last reading compared to this reading is " + (thisRead - lastRead) + " KWH &lt;br&gt;Are you SURE you want to submit this Reading?");
         $('#idthing').attr('style' , 'color: red !important');
     }
     else { $('#idthing').text(thisRead - lastRead + ' KWH');}
});

function CombinedNumber(arrayNums) {
        combined = "";
        $('.xyz').each(function (index) {
            arrayNums.push($(this).val());
        });
        $.each(arrayNums, function (index, value) {
            combined += value;
        });
        console.log(combined);
        return combined
</code></pre>

<p>This works the first time, if the user clicks off of the area, before hitting the submit button, but they might hit the submit button first.
Additionally, it ceases to do the calculation after the first time it happens!</p>

<p>I am trying to get a responsive calculation each time someone enters a number. Here is the DOM portion.</p>

<pre><code>&lt;div&gt;
  &lt;ul&gt;
   &lt;li&gt;
       &lt;input class="xyz"&gt;
   &lt;/li&gt;
   &lt;li&gt;
       &lt;input class="xyz"&gt;
   &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre>