Jquery remove div of previous selection and append current selection to allow only one selection per-CodePudding

I have The following code with buttons that append selections to the "cart" div on click

In The first Script, Its function is to allow only one selection per row whenever multiple buttons in the same row are clicked.

In the second script, its function is to append the selections to the "cart" div and remove if choice has been unselected.

The problem comes in when I click on multiple buttons in the same row, the first script seems to work just fine as in it de-actives the previous one and activates the current button clicked, the second script is supposed to remove the previous selection in the same row and update the new selection for the current button that is active

How do I get to edit my second script to cater for this functionality?

<body style ="margin:10px;">


  <div >
  
    <div id="box" ></div><br>
  
  </div>


  <table id="Table1" >


    <thead >
      <tr>   
          <th>League</th>
          <th>Home [1]</th>
          <th>Draw [x]</th>
          <th>Away [2]</th>
          <th>Kickoff</th>
      </tr>
  </thead>


  <tr  style="display: table-row;">
            
    <td >Almagro-Temperley</td> 
    <td id="bbox"><input type="button"  id="3" value="1.95" data-selected="false"></td>
    <td id="bbox"><input type="button"  id="4" value="2.95" data-selected="false"></td>
    <td id="bbox"><input type="button"  id="5" value="3.90" data-selected="false"></td>
    <td id="date">8/1/2022 8:00:00 PM</td> 
    
  </tr>

  <tr  style="display: table-row;">
              
    <td >Guillermo Brown-Santamarina</td> 
    <td id="bbox"><input type="button"  id="6" value="1.65" data-selected="false"></td>
    <td id="bbox"><input type="button"  id="7" value="3.25" data-selected="false"></td>
    <td id="bbox"><input type="button"  id="8" value="5.10" data-selected="false"></td>
    <td id="date">8/1/2022 8:00:00 PM</td> 
    
  </tr>

  <tr  style="display: table-row;">
              
    <td >Nueva Chicago-CSD Flandria</td> 
    <td id="bbox"><input type="button"  id="9" value="2.25" data-selected="false"></td>
    <td id="bbox"><input type="button"  id="10" value="2.85" data-selected="false"></td>
    <td id="bbox"><input type="button"  id="11" value="3.15" data-selected="false"></td>
    <td id="date">8/1/2022 8:00:00 PM</td> 
    
  </tr>

</table>


</body>

</html>

In this script, Its function is to allow only one selection per row whenever multiple buttons in the same row are clicked.

<script>

$(document).ready(function(){

$('.decimals').click(function() { 

if ($(this).attr('data-selected') === 'true') {

$(this).attr('data-selected', 'false');

$(this).removeClass('active');

} else {

$(this).closest('tr').find('.decimals').not(this)

.removeClass('active').attr('data-selected', 'false');

$(this).attr('data-selected', 'true');

$(this).addClass('active');

}

});
});

</script>

In this script, its function is to append the selections to the "cart" div and remove if choice has been unselected.

its supposed to remove the previous selection in the same row and append or update the new selection for the current button that is active

<script>


  let $th = $('#Table1 thead th');
  
  $(".decimals").on('click', e => {
    
  let $btn = $(e.target);
  let $option = $(`.box[data-id="${$btn.prop('id')}"]`);
  
  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;
  }
  
  $("#box").append(`<div  data-id="${$btn.prop('id')}">${match}<br>${result}<div >${value}</div><input type="hidden" name="kickoff[]" value="${kickoff}"/><input type="hidden" name="match[]" value="${match}"/><input type="hidden" name="result[]" value="${result}" readonly/><input type="hidden" name="value[]" value="${value}"/></div>`);
  
  
  });
  
  
  </script>


.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);
    
}

CodePudding user response：

As far as I understood the the issue was with removing the existing appended cart div. I did something hoping it would fix your issue. But it may be better to just updates the values as in my code flickering occurs.

let $th = $('#Table1 thead th');

$('.decimals').click(function(e) { 

let $btn = $(e.target);
  let $option = $(`.box[data-id="${$btn.prop('id')}"]`);
  
  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();

var knowit = $(this).closest('.items').find('.addItem').text();

var radiovalue = $(this).attr('value');


if ($('.boxlit .box:contains("' knowit '")').length < 1) {

setTimeout ( function () { 
  $("#box").append(`<div  data-id="${$btn.prop('id')}">${match}<br><span>${result}</span><div >${value}</div><input type="hidden" name="kickoff[]" value="${kickoff}"/><input type="hidden" name="match[]" value="${match}"/><input type="hidden" name="result[]" value="${result}" readonly/><input type="hidden" name="value[]" value="${value}"/></div>`); },0) }

else if ($(this).hasClass('active')) {
$('.boxlit .box:contains("' knowit '")').remove()
}


else {
$('.boxlit .box:contains("' knowit '") .crtTotal').text(radiovalue);

$('.boxlit .box:contains("' knowit '") span').text(result);
}

})

.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);
    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body style ="margin:10px;">


  <div >
  
    <div id="box" ></div><br>
  
  </div>


  <table id="Table1" >


    <thead >
      <tr>   
          <th>League</th>
          <th>Home [1]</th>
          <th>Draw [x]</th>
          <th>Away [2]</th>
          <th>Kickoff</th>
      </tr>
  </thead>


  <tr  style="display: table-row;">
            
    <td >Almagro-Temperley</td> 
    <td id="bbox"><input type="button"  id="3" value="1.95" data-selected="false"></td>
    <td id="bbox"><input type="button"  id="4" value="2.95" data-selected="false"></td>
    <td id="bbox"><input type="button"  id="5" value="3.90" data-selected="false"></td>
    <td id="date">8/1/2022 8:00:00 PM</td> 
    
  </tr>

  <tr  style="display: table-row;">
              
    <td >Guillermo Brown-Santamarina</td> 
    <td id="bbox"><input type="button"  id="6" value="1.65" data-selected="false"></td>
    <td id="bbox"><input type="button"  id="7" value="3.25" data-selected="false"></td>
    <td id="bbox"><input type="button"  id="8" value="5.10" data-selected="false"></td>
    <td id="date">8/1/2022 8:00:00 PM</td> 
    
  </tr>

  <tr  style="display: table-row;">
              
    <td >Nueva Chicago-CSD Flandria</td> 
    <td id="bbox"><input type="button"  id="9" value="2.25" data-selected="false"></td>
    <td id="bbox"><input type="button"  id="10" value="2.85" data-selected="false"></td>
    <td id="bbox"><input type="button"  id="11" value="3.15" data-selected="false"></td>
    <td id="date">8/1/2022 8:00:00 PM</td> 
    
  </tr>

</table>


<script>

$(document).ready(function(){

$('.decimals').click(function() { 

if ($(this).attr('data-selected') === 'true') {

$(this).attr('data-selected', 'false');

$(this).removeClass('active');

} else {

$(this).closest('tr').find('.decimals').not(this)

.removeClass('active').attr('data-selected', 'false');

$(this).attr('data-selected', 'true');

$(this).addClass('active');

}

});
});

</script>





</body>

CodePudding user response：

So I decided to add a section that calculates total odds and total payout to the cart using the reduce method and I'm having a small problem with the calculation when appending the first selection, 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 It appends other selections

here is the code for the cart


  <div id="box" ></div><br>

<div >

  <div>Total Odds: <b id="ct1">0.00</b></div><br>

  <div>(N$)Stake: <input id="stake" type ="number" name="stake[]" value="5"> NAD</div><br>

  <div>Payout: N$ <b id="payout">0.00</b></div>

  <input  type="submit" name="submit" value="Bet">

</div>

This Is the code that calculates the total odds and payout of selections

<script>

$(document).ready(function(){

$('.decimals').click(function(e) { 

let values = $('.crtTotal').map((i, el) => parseFloat(el.textContent)).get();
let total = values.reduce((a, b) => a * b, values.length > 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
$("#payout").text(net.toFixed(2)).val();
$("#inp").val(net.toFixed(2)).val();

})
})


</script>

I tried tracking where the problem is coming from and it seems to be at the setTimeout section,

setTimeout ( function () { 
$("#box").append(`<div  data-id="${$btn.prop('id')}">${match}<br><span>${result}</span><div >${value}</div></div>`); },0) }

it appends the values to the cart, How do I correct my code to calculate from the first button click?