title: Cannot display correct position for display realtime calculate result use javascript
body: <p>now im doing laravel project that have function calculate realtime result use javascript.</p>
  <p>im following this link <a href="https://stackoverflow.com/questions/62910401/cannot-get-realtime-calculate-result-use-javascript-in-foreach-condition/62910780#62910780">Cannot get realtime calculate result use javascript in foreach condition</a></p>
  <p>the calculate result is correct but not the position. i explain with image gif for more understand</p>
  <p><a href="https://i.stack.imgur.com/uZ8V3.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uZ8V3.gif" alt="enter image description here" /></a></p>
  <p>if you see. at first. when i input 100. the second row display 100.00 that replace the <code>&lt;input&gt;</code> code on &quot;discount(%)&quot; columns. this is not correct.. 100.00 should display on &quot;total&quot; columns..</p>
  <p>but different with the second and third rows. input price and discount. it will display result on &quot;total&quot; row. that condition is correct.</p>
  <p>Datas is using <code>foreach()</code> code. the problem is only for first row on each name. the second row and the rest is correct display.</p>
  <p>here is the code</p>
  <pre><code>&lt;table class=&quot;table table-bordered&quot; width=&quot;100%&quot;&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th class=&quot;text-center align-middle&quot; width=&quot;10%&quot;&gt;Name&lt;/th&gt;
              &lt;th class=&quot;text-center align-middle&quot; width=&quot;10%&quot;&gt;Item&lt;/th&gt;
              &lt;th class=&quot;text-center align-middle&quot; width=&quot;10%&quot;&gt;Price&lt;/th&gt;
              &lt;th class=&quot;text-center align-middle&quot; width=&quot;10%&quot;&gt;Discount (%)&lt;/th&gt;
              &lt;th class=&quot;text-center align-middle&quot; width=&quot;10%&quot;&gt;Total&lt;/th&gt;  
          &lt;/tr&gt;
      &lt;/thead&gt;  
  
      &lt;tbody&gt; 
          @foreach ($datas as $data) 
              @php
                  $countitems = count($data-&gt;items);
              @endphp
              &lt;tr&gt; 
                  &lt;td rowspan=&quot;{{$countitems}}&quot;&gt; {{$record-&gt;name}} &lt;/td&gt;  
                  @foreach ($data-&gt;items as $key =&gt; $items)
                      @if ($key == 0) 
                          &lt;td class=&quot;text-center&quot; width=&quot;10%&quot;&gt;{{ $items-&gt;name }} &lt;/td&gt;
                          &lt;td class=&quot;text-center&quot; width=&quot;10%&quot;&gt; &lt;input class='price' type=&quot;number&quot; name=&quot;price[$data-&gt;id][$key]&quot; &gt; &lt;/td&gt;
                          &lt;td class=&quot;text-center&quot; width=&quot;10%&quot;&gt; &lt;input class='discount' type=&quot;number&quot; name=&quot;discount[$data-&gt;id][$key]&quot; &gt; &lt;/td&gt;
                          &lt;td class=&quot;text-center&quot; width=&quot;10%&quot;&gt; &lt;/td&gt; 
                      @endif 
                  @endforeach 
              &lt;/tr&gt;
  
              @for ($i = 1; $i &lt; $countitems; $i++)
              &lt;tr&gt;
                  @foreach ($data-&gt;items as $key =&gt; $items)
                      @if ($key == $i) 
                          &lt;td class=&quot;text-center&quot; width=&quot;10%&quot;&gt;{{ $items-&gt;name }} &lt;/td&gt;
                          &lt;td class=&quot;text-center&quot; width=&quot;10%&quot;&gt; &lt;input class='price' type=&quot;number&quot; name=&quot;price[$data-&gt;id][$key]&quot; &gt; &lt;/td&gt;
                          &lt;td class=&quot;text-center&quot; width=&quot;10%&quot;&gt; &lt;input class='discount' type=&quot;number&quot; name=&quot;discount[$data-&gt;id][$key]&quot; &gt; &lt;/td&gt;
                          &lt;td class=&quot;text-center&quot; width=&quot;10%&quot;&gt; &lt;/td&gt; 
                      @endif 
                  @endforeach  
              &lt;/tr&gt; 
              @endfor
  
          @endforeach
      &lt;/tbody&gt;
  
      &lt;tfoot&gt;
          &lt;tr&gt;
              &lt;th colspan=&quot;2&quot; class=&quot;text-right align-middle&quot;&gt;Grand Total&lt;/th&gt; 
              &lt;th class=&quot;text-center align-middle&quot;&gt; &lt;span id=&quot;totalprice&quot;&gt;&lt;/span&gt; &lt;/th&gt;
              &lt;th class=&quot;text-center align-middle&quot;&gt; &lt;span id=&quot;totaldiscount&quot;&gt;&lt;/span&gt; &lt;/th&gt;
              &lt;th class=&quot;text-center align-middle&quot; id=&quot;totalall&quot;&gt; &lt;/th&gt;  
          &lt;/tr&gt;
      &lt;/tfoot&gt;
       
  &lt;/table&gt;
   
  &lt;script type=&quot;text/javascript&quot;&gt;
  $(function() {
  
      $(&quot;tbody&quot;).on(&quot;input&quot;, function() {
  
          const totalprice = $(&quot;.price&quot;).map(function(i, input) {
              const val = input.value &amp;&amp; !isNaN(input.value) ? +input.value : 0;
              $(input).closest(&quot;tr&quot;).find(&quot;td&quot;).eq(3).text(val)
              return val;
          }).get().reduce((acc, cur) =&gt; { acc += cur; return acc; }, 0)
          $(&quot;#totalprice&quot;).text(totalprice);
  
  
          const totalEach = $(&quot;.price&quot;).map(function(i, input) {
              const price = input.value &amp;&amp; !isNaN(input.value) ? +input.value : 0;
              let  discount = $(input).closest(&quot;td&quot;).next().find(&quot;input&quot;).val();
              discount = discount &amp;&amp; !isNaN(discount) ? +discount : 0;
              const val = (price - price * (discount/100))
              $(input).closest(&quot;tr&quot;).find(&quot;td&quot;).eq(3).text(val.toFixed(2))
              return val;
          }).get().reduce((acc, cur) =&gt; { acc += cur; return acc; }, 0)
  
          $(&quot;#totalall&quot;).text(totalEach.toFixed(2))
  
          const totaldiscount = $(&quot;.discount&quot;).map(function(i, input) {
              return input.value &amp;&amp; !isNaN(input.value) ? +input.value : 0;
          }).get().reduce((acc, cur) =&gt; {
              acc += cur;
              return acc;
          }, 0)
          $(&quot;#totaldiscount&quot;).text(totaldiscount);
  
      });
  
  });
  &lt;/script&gt;
  
  </code></pre>
  <p>i guest the problem is in this code <code>$(input).closest(&quot;tr&quot;).find(&quot;td&quot;).eq(3).text(val)</code></p>
  <p>but i still confuse how to solve this. please help</p>