How To Add multiple Button Selections to a Div-CodePudding

So I have A Table With Buttons and match information, I am trying to script a code when I click on the specific button, it adds my selections to div(cart) for example if i click on the first button (1.59), it should add the match Name to the cart (Arsenal-Chelsea) ,The related selection (Arsenal) OR Header Name (Home) and The Value (1.59) in this order

Arsenal-Chelsea Arsenal 1.59

Plus, I need it to be functional whenever I Re-click on the same button (1.59) it should be able to remove the selection from the cart

$(".nr").click(function() {
  var $item = $(this).closest("tr").find(".nr").val();
  $("#cart").append($item);
  $("#cart").append("<div class='cart' Id='cart'>");
});

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javscript" src="script.js"></script>

<div  Id="cart">
  <div >Bet Slip</div>
  <chr/>
  <div id="sel"><span></span></div><br>
  <span>Selections:</span><br>
  <button >Bet</button><br>
</div>
<br>
<table id="choose-address-table"  border="1">
  <thead>
    <tr >
      <th>Match</th>
      <th>Home</th>
      <th>Draw</th>
      <th>Away</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Arsenal-Chelsea</td>
      <td><input type=button  value="1.59"></td>
      <td><input type=button  value="3.40"></td>
      <td><input type=button  value="2.90"></td>
      </td>
    </tr>
    <tr>

      <td>Man United-Man City</td>
      <td><input type=button  value="2.70"></td>
      <td><input type=button  value="2.90"></td>
      <td><input type=button  value="2.50"></td>
      </td>
    </tr>
    <tr>
      <td>Barcelona-Real Madrdid</td>
      <td><input type=button  value="3.60"></td>
      <td><input type=button  value="3.20"></td>
      <td><input type=button  value="1.95"></td>
      </td>
    </tr>
  </tbody>
</table>

CodePudding user response：

You need to use DOM traversal to find the content related to the button which was clicked. To get the venue you can get the index of the containing td and then retrieve the matching thead th which holds the text. To get the match you can get the text of the first td in the current row.

When appending the new content, don't use id attributes as they must be unique.

Also note in the following example that I fixed some of the issues in your HTML, such as extra </td> tags and removing the <chr /> tag, which doesn't exist.

let $th = $('#choose-address-table thead th');

$(".nr").on('click', e => {
  let $btn = $(e.target);
  let $option = $(`.cart[data-id="${$btn.prop('id')}"]`);
  if ($option.length) {
    $option.remove();
    return;
  }
  
  let $tr = $btn.closest('tr');
  let selectionIndex = $btn.closest('td').index();

  let match = $tr.find('td:first').text().trim();
  let result = $th.eq(selectionIndex).text().trim();
  let value = $btn.val();
  $("#cart").append(`<div  data-id="${$btn.prop('id')}">${match} ${result} ${value}</div>`);
});

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<div  Id="cart">
  <div >Bet Slip</div>
  <div id="sel"><span></span></div><br />
  <span>Selections:</span><br />
  <button >Bet</button><br />
</div><br />
<table id="choose-address-table"  border="1">
  <thead>
    <tr >
      <th>Match</th>
      <th>Home</th>
      <th>Draw</th>
      <th>Away</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Arsenal-Chelsea</td>
      <td><input type="button"  value="1.59" id="option_0_0" /></td>
      <td><input type="button"  value="3.40" id="option_0_1" /></td>
      <td><input type="button"  value="2.90" id="option_0_2" /></td>
    </tr>
    <tr>
      <td>Man United-Man City</td>
      <td><input type="button"  value="2.70" id="option_1_0" /></td>
      <td><input type="button"  value="2.90" id="option_1_1" /></td>
      <td><input type="button"  value="2.50" id="option_1_2" /></td>
    </tr>
    <tr>
      <td>Barcelona-Real Madrdid</td>
      <td><input type="button"  value="3.60" id="option_2_0" /></td>
      <td><input type="button"  value="3.20" id="option_2_1" /></td>
      <td><input type="button"  value="1.95" id="option_2_2" /></td>
    </tr>
  </tbody>
</table>