JQuery Script doesn't run on the first click of the button

Question

I got a table with rows that are dynamically added according to user input (from a Json File)

JSON Data

[["XLNY2","dada",0],["7CVU6","dada",0],["79RBA","est",0],["OAUMX","d",0]]

HTML

<div class="table">
        <div class="table-wrap">
            <div class="table-row search">
                <input type="text" placeholder="Search..." class="text-input" id="client-search">
            </div>
            <div class="table-row heading">  
                <div id="client-symbol">
                    <p>Symbol</p>
                </div>
                <div id="client-name">
                    <p>Name</p>
                </div>
                <div id="points-total">
                    <p>Points</p>
                </div>
                <div id="navigation">
                    <p>Nav</p>
                    <button><button>
                </div>
            </div>
        </div>
    </div>

JS

$(document).ready(function () {

    $.getJSON('api.php', function (response) {
      $("#client-search").on('input change',function() {
        
        var inputVal = $("#client-search").val();
            inputVal = inputVal.toLowerCase();
          var filteredSymbols = response.filter(function(word) {
            return word[0].toLowerCase().includes(inputVal); 
          });
          $(".table-row.client").remove(); 
          
          var counter = 0;
          filteredSymbols.forEach(element => {

            if(counter > 6) {
            }
         
            else {
                
                var symbol = element[0];
                var name = element[1];
                var points = element[2];

                var record = `<div class="table-row client"><div id="client-symbol"><p>${symbol}</p></div><div id="client-name"><p>${name}</p></div><div id="points-total"><p>${points}</p></div><div id="navigation"><button class="btn" token="${symbol}" id="addpoints">Add points</button><button class="btn" token="${symbol}" id="discount">Discount</button></div>`;
                  $(".table-wrap").append(record);     
                  
            }
            counter++;
          });
      });
    });
  });

I want to add a modal which will be displayed once I press either of two buttons located in id="navigation" but for some reason it never works on first click.

I have to double click on input change as well.

Im trying to get this to work:

$('.btn').click(function() {
  var content = this;
  console.log(content);
});

But no matter where I put it or how I do it - the outcome remains the same or it doesn't work at all.

What did I miss?