Add paramters to URL with click functions

Question

I want to add parameters to the actual url depending on the selected values. The values will be set with a click function and should work independently from each other.

I've set global variables to store the click function values, but they don't get stored. How can I store the values correctely to work with them in my "URLSearchParams" string?

This is the Fiddle.

 var btn0;    
 var btn1;
      
      $('.btn0').click(function () {
    if ($(this).attr('data-selected') === 'true') {
      $(this).attr('data-selected', 'false');
      $(this).removeClass('selected');

    } else {
      $(this).closest('tr').find('.btn0').not(this)
        .removeClass('selected').attr('data-selected', 'false');
      $(this).attr('data-selected', 'true');
      $(this).addClass('selected');
      var btn0 = $(this).data("value");
    }
  });
  
      $('.btn1').click(function () {
        if ($(this).attr('data-selected') === 'true') {
            $(this).attr('data-selected', 'false');
            $(this).removeClass('selected');

        } else {
            $(this).closest('tr').find('.btn1').not(this)
            .removeClass('selected').attr('data-selected', 'false');
            $(this).attr('data-selected', 'true');
            $(this).addClass('selected');
            var btn1 = $(this).data("value");
        }
    });
    
const params = new URLSearchParams({
  var0: btn0,
  var1: btn1
});   
console.log(params.toString());

Answer 1

Consider the following: https://jsfiddle.net/Twisty/ckd1j6u0/

HTML

<table class="container">
  <tbody>
    <tr class="tier0">
      <td class="talent-cell">
        <div class="btn btn0" data-value="a">Test0</div>
      </td>
      <td class="talent-cell">
        <div class="btn btn0" data-value="b">Test1</div>
      </td>
      <td class="talent-cell">
        <div class="btn btn0" data-value="c">Test2</div>
      </td>
    </tr>
    <tr class="tier1">
      <td class="talent-cell">
        <div class="btn btn1" data-value="d">Test0</div>
      </td>
      <td class="talent-cell">
        <div class="btn btn1" data-value="e">Test1</div>
      </td>
      <td class="talent-cell">
        <div class="btn btn1" data-value="f">Test2</div>
      </td>
    </tr>
  </tbody>
</table>

JavaScript

$(function() {
  var selected = {
    var0: null,
    var1: null
  };
  $('.btn').click(function(event) {
    var row = $(this).closest("tr");
    $(".selected", row).removeClass("selected");
    $(this).addClass("selected");
    if ($(".selected").length == 2) {
      $("tr").each(function(i, el) {
        selected['var' + i] = $(".selected", el).attr("data-value");
      });
      var params = new URLSearchParams(selected);
      console.log(params.toString());
    }
  });
});

This uses just selected class instead of trying to also manage data-selected attributes. The code first makes sure only one button in each row is selected. It then populates an Object. When two selections have been made, it then creates the parameters for URL.