How To Add multiple Button Selections to a Div

Issue

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 class="cart" Id="cart">
  <div class="title">Bet Slip</div>
  <chr/>
  <div id="sel"><span></span></div><br>
  <span>Selections:</span><br>
  <button class="bet1">Bet</button><br>
</div>
<br>
<table id="choose-address-table" class="ui-widget ui-widget-content" border="1">
  <thead>
    <tr class="ui-widget-header ">
      <th>Match</th>
      <th>Home</th>
      <th>Draw</th>
      <th>Away</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Arsenal-Chelsea</td>
      <td><input type=button class="nr" value="1.59"></td>
      <td><input type=button class="nr" value="3.40"></td>
      <td><input type=button class="nr" value="2.90"></td>
      </td>
    </tr>
    <tr>

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

Solution

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 class="cart" data-id="${$btn.prop('id')}">${match} ${result} ${value}</div>`);
});

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

Answered By - Rory McCrossan