Skip to content
Advertisement

Jquery remove div of previous selection and append current selection to allow only one selection per row using buttons

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 class="cart">
  
    <div id="box" class="boxlit"></div><br>
  
  </div>


  <table id="Table1" class="Fixtures-Table">


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


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

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

  <tr class="items" style="display: table-row;">
              
    <td class="addItem">Nueva Chicago-CSD Flandria</td> 
    <td id="bbox"><input type="button" class="decimals" id="9" value="2.25" data-selected="false"></td>
    <td id="bbox"><input type="button" class="decimals" id="10" value="2.85" data-selected="false"></td>
    <td id="bbox"><input type="button" class="decimals" 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 class="box" data-id="${$btn.prop('id')}">${match}<br>${result}<div class="crtTotal">${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);
    
}

Advertisement

Answer

The set timeout was causing the issue. I adjusted it in the following code:

When changing the stake it is also updating now I added a small line.

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) {


  $("#box").append(`<div class="box" data-id="${$btn.prop('id')}">${match}<br><span>${result}</span><div class="crtTotal">${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>`);}

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


  <div class="cart">
  
    <div id="box" class="boxlit"></div><br>

<div class="shift">

  <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 class="bet1" type="submit" name="submit" value="Bet">

</div>
  
  </div>


  <table id="Table1" class="Fixtures-Table">


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


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

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

  <tr class="items" style="display: table-row;">
              
    <td class="addItem">Nueva Chicago-CSD Flandria</td> 
    <td id="bbox"><input type="button" class="decimals" id="9" value="2.25" data-selected="false"></td>
    <td id="bbox"><input type="button" class="decimals" id="10" value="2.85" data-selected="false"></td>
    <td id="bbox"><input type="button" class="decimals" 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>



<script>

$(document).ready(function(){

$('.decimals').click(function(e) { 
 updateoddsnpayout();
})

$('body').on('change', '#stake', function(e){
 updateoddsnpayout();
})

var updateoddsnpayout =  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>







</body>
User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement