JS Variable Not Being Passed Correctly

I’ve been working on this code for a while. I have a HTML, JS and a Code.js page.

On changing of the value in a Dropdown list on my HTML form, the item in the Dropdown is passed to the Code.js to have the result returned, however, I keep having NULL as my result. -arr is the result.

Another issue, is that I can see in the script logs that getRowData() is being executed twice, not sure why, but this may be overwriting our array.

HTML

JS

//$('#searchDropdown').one('change', function(){
//$("#searchDropdown").change(function(){  
//$('#searchDropdown').on('keyup propertychange change', function(){
//$('#searchDropdown').on('input', function(){
//$('#searchDropdown').one('submit', function(){

  $('#searchDropdown').one('change', function(){ 

      var selatr = $('#input1').val();
      google.script.run.withSuccessHandler(poperr).getRowData(selatr);
      
   });
   
   function poperr(arr){
   alert(arr +" ! ");     
   }  

Code.GS

function getRowData(selatr){
  //Vlookup a GoogleSheet and return the resulting row
  sheet_data.getRange(2,16).setValue(selatr); //set for vlookup
  var x = sheet_data.getRange(3,16).getValues();
  var arr= [];
  arr.push({ 
    id : selatr
    name : sheet_data.getRange(x,2).getValues()
  })
  return arr;
}

  $('#searchDropdown').one('change', function(e){ 
     e.stopImmediatePropagation();
     var selatr = $('#input1').val();
     google.script.run.withSuccessHandler(poperr).getRowData(selatr);
  
  });