title: Reduce method not functioning in order when appending using jquery setTimeout function
body: <p>I am having a problem with a section that calculates total odds and total payout in the cart using the reduce method, there's a issue with the calculation when appending the first selection to the cart , It seems to only calculate after the second button click, whenever I click on another button, the total starts calculation on the second click, it feels like its one step back when appending multiple selections</p>
  <p>html:</p>
  <pre><code>
  &lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Bet Plus 24/7&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;button.css&quot;&gt;
      &lt;script src=&quot;https://code.jquery.com/jquery-3.5.0.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javscript&quot; src=&quot;script.js&quot;&gt;&lt;/script&gt;
      
      
  &lt;/head&gt;
  
  &lt;body style =&quot;margin:10px;&quot;&gt;
  
  
    &lt;div class=&quot;cart&quot;&gt;
    
      &lt;div id=&quot;box&quot; class=&quot;boxlit&quot;&gt;&lt;/div&gt;&lt;br&gt;
  
      &lt;div class=&quot;shift&quot;&gt;
  
        &lt;div&gt;Total Odds: &lt;b id=&quot;ct1&quot;&gt;0.00&lt;/b&gt;&lt;/div&gt;&lt;br&gt;
      
        &lt;div&gt;(N$)Stake: &lt;input id=&quot;stake&quot; type =&quot;number&quot; name=&quot;stake[]&quot; value=&quot;5&quot;&gt; NAD&lt;/div&gt;&lt;br&gt;
      
        &lt;div&gt;Payout: N$ &lt;b id=&quot;payout&quot;&gt;0.00&lt;/b&gt;&lt;/div&gt;
      
        &lt;input class=&quot;bet1&quot; type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Bet&quot;&gt;
      
      &lt;/div&gt;
    
    &lt;/div&gt;
  
  
    &lt;table id=&quot;Table1&quot; class=&quot;Fixtures-Table&quot;&gt;
  
  
      &lt;thead class=&quot;disnon&quot;&gt;
        &lt;tr&gt;   
            &lt;th&gt;League&lt;/th&gt;
            &lt;th&gt;Home [1]&lt;/th&gt;
            &lt;th&gt;Draw [x]&lt;/th&gt;
            &lt;th&gt;Away [2]&lt;/th&gt;
            &lt;th&gt;Kickoff&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
  
  
    &lt;tr class=&quot;items&quot; style=&quot;display: table-row;&quot;&gt;
              
      &lt;td class=&quot;addItem&quot;&gt;Almagro-Temperley&lt;/td&gt; 
      &lt;td id=&quot;bbox&quot;&gt;&lt;input type=&quot;button&quot; class=&quot;decimals&quot; id=&quot;3&quot; value=&quot;1.95&quot; data-selected=&quot;false&quot;&gt;&lt;/td&gt;
      &lt;td id=&quot;bbox&quot;&gt;&lt;input type=&quot;button&quot; class=&quot;decimals&quot; id=&quot;4&quot; value=&quot;2.95&quot; data-selected=&quot;false&quot;&gt;&lt;/td&gt;
      &lt;td id=&quot;bbox&quot;&gt;&lt;input type=&quot;button&quot; class=&quot;decimals&quot; id=&quot;5&quot; value=&quot;3.90&quot; data-selected=&quot;false&quot;&gt;&lt;/td&gt;
      &lt;td id=&quot;date&quot;&gt;8/1/2022 8:00:00 PM&lt;/td&gt; 
      
    &lt;/tr&gt;
  
    &lt;tr class=&quot;items&quot; style=&quot;display: table-row;&quot;&gt;
                
      &lt;td class=&quot;addItem&quot;&gt;Guillermo Brown-Santamarina&lt;/td&gt; 
      &lt;td id=&quot;bbox&quot;&gt;&lt;input type=&quot;button&quot; class=&quot;decimals&quot; id=&quot;6&quot; value=&quot;1.65&quot; data-selected=&quot;false&quot;&gt;&lt;/td&gt;
      &lt;td id=&quot;bbox&quot;&gt;&lt;input type=&quot;button&quot; class=&quot;decimals&quot; id=&quot;7&quot; value=&quot;3.25&quot; data-selected=&quot;false&quot;&gt;&lt;/td&gt;
      &lt;td id=&quot;bbox&quot;&gt;&lt;input type=&quot;button&quot; class=&quot;decimals&quot; id=&quot;8&quot; value=&quot;5.10&quot; data-selected=&quot;false&quot;&gt;&lt;/td&gt;
      &lt;td id=&quot;date&quot;&gt;8/1/2022 8:00:00 PM&lt;/td&gt; 
      
    &lt;/tr&gt;
  
    &lt;tr class=&quot;items&quot; style=&quot;display: table-row;&quot;&gt;
                
      &lt;td class=&quot;addItem&quot;&gt;Nueva Chicago-CSD Flandria&lt;/td&gt; 
      &lt;td id=&quot;bbox&quot;&gt;&lt;input type=&quot;button&quot; class=&quot;decimals&quot; id=&quot;9&quot; value=&quot;2.25&quot; data-selected=&quot;false&quot;&gt;&lt;/td&gt;
      &lt;td id=&quot;bbox&quot;&gt;&lt;input type=&quot;button&quot; class=&quot;decimals&quot; id=&quot;10&quot; value=&quot;2.85&quot; data-selected=&quot;false&quot;&gt;&lt;/td&gt;
      &lt;td id=&quot;bbox&quot;&gt;&lt;input type=&quot;button&quot; class=&quot;decimals&quot; id=&quot;11&quot; value=&quot;3.15&quot; data-selected=&quot;false&quot;&gt;&lt;/td&gt;
      &lt;td id=&quot;date&quot;&gt;8/1/2022 8:00:00 PM&lt;/td&gt; 
      
    &lt;/tr&gt;
  
  &lt;/table&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  
  
  </code></pre>
  <p>This is script that calculates the total odds and payout</p>
  <pre><code>&lt;script&gt;
  
    $(document).ready(function(){
    
    $('.decimals').click(function(e) { 
    
    let values = $('.crtTotal').map((i, el) =&gt; parseFloat(el.textContent)).get();
    let total = values.reduce((a, b) =&gt; a * b, values.length &gt; 0 ? 1 : 0);
    let eq = 0
    let tot = eq += total
    
    
    $('#ct1').text(tot.toFixed(2)).val()
    $('#todds').val(tot.toFixed(2)).val()
    
    
    var z = 0
    var x = parseFloat($('#ct1').text()?? 0);
    var y = parseFloat($('#stake').val()?? 0);
    var net = z + x * y
    $(&quot;#payout&quot;).text(net.toFixed(2)).val();
    $(&quot;#inp&quot;).val(net.toFixed(2)).val();
    
    })
    })
    
    
  &lt;/script&gt;
  
  
  </code></pre>
  <p>This is the script that appends the selections to the cart</p>
  <pre><code>&lt;script&gt;
  
  
    let $th = $('#Table1 thead th');
    
    $(&quot;.decimals&quot;).on('click', e =&gt; {
      
    let $btn = $(e.target);
    let $option = $(`.box[data-id=&quot;${$btn.prop('id')}&quot;]`);
    
    let $tr = $btn.closest('tr');
    let selectionIndex = $btn.closest('td').index();
    
    let kickoff = $tr.find('td:last').text().trim();
    let match = $tr.find('td:first').text().trim();
    
    let result = $th.eq(selectionIndex).text().trim();
    let value = $btn.val();
    
    if ($option.length){
    $option.remove();
    return;
    }
    
    setTimeout ( function () { 
  $(&quot;#box&quot;).append(`&lt;div class=&quot;box&quot; data-id=&quot;${$btn.prop('id')}&quot;&gt;${match}&lt;br&gt;&lt;span&gt;${result}&lt;/span&gt;&lt;div class=&quot;crtTotal&quot;&gt;${value}&lt;/div&gt;&lt;/div&gt;`); },0) }
  
    
   else if ($(this).hasClass('active')) {
  $('.boxlit .box:contains(&quot;'+knowit+'&quot;)').remove()
  }
  
  
  else {
  
  $('.boxlit .box:contains(&quot;'+knowit+'&quot;) .crtTotal').text(radiovalue);
  
  $('.boxlit .box:contains(&quot;'+knowit+'&quot;) span').text(result);
  
  }
  
  
  })
    
    
    &lt;/script&gt;
  </code></pre>
  <p>css</p>
  <pre><code>.decimals {
      background-color: rgb(31, 31, 31);
      color: rgb(255, 255, 255);
      border: 2px solid #0e1516;
      border-radius: 4px;
      font-size: 13px;
      padding: 4px 10px;
      font-weight: bold;
      border-width: 1px;
      cursor: pointer;
  }
  
  .decimals:hover {
       background: rgb(51, 51, 51);
  }
  
  .active,
  .active:hover {
  
      background: rgb(161, 0, 0);
      color: rgb(255, 255, 255);
      border-color: rgb(156, 0, 0);
      
  }
  </code></pre>
  <p>how do I Edit My code to make the reduce method functional?</p>