passing data values from inner function to inner function with js/jquery

I am combining two functions into a single function and need to pass the value of my id from calla() to callb() so callb() can also use that information in its AJAX call. When these were two different functions, a button was clicked which triggered my callb() function and passed the id to it. Now that they are one single function with two calls, I am uncertain how to pass this along.

I know it’s going to be some type of event listener but when I wrap callb() in a jQuery(document).load( then it tells me callb() is undefined. If I remove callb() then it doesn’t run the function at all.

jQuery(document).on('popup/show', (event, id) => {
  if (id === 123) {
    function callA() {
      jQuery.ajax({
        data: {
          action: 'list_count'
        },
        type: 'post',
        url: my_ajax.ajax_url,
        dataType: 'JSON',
        success: function(data) {
          var id = jQuery().data('id')
          var html = '';
          
          jQuery.each(data, function(key, value) {
            html += '<div class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all" id="' + value.id + '" style="display:table-row">';
            html += '<div class="image"  style="display: table-cell";>' + value.img + '</div>';
            html += '<div style="display: table-cell";>' + value.Name + '</div>';
            html += '<div  style="display: table-cell">' + value.Size + '</div>';
            html += '<div  style="display: table-cell"> ' + value.Number + ' </div>';
            html += '<div class="tdid_' + value.id + '"  style="display: table-cell">' + value.Status + '</div>';
            html += '</div>';
            html += '<div id="cid_' + value.id + '" class="bg_clear ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: table-cell">';
            html += '<div class="bg_clear ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: table-cell"></div>';
            html += '  </div>';
          });
          jQuery('#list').html(html);
        }
      });
    }

    function callB(id) {
      jQuery.ajax({
        type: 'post',
        url: my_ajax.ajax_url,
        data: {
          action: 'options_function',
          cid: id
        },
        success: function(data) {
          jQuery(data).after('#cid_' + id)
          console.log(data);
          console.log(id);
        }
      });
    }
    
    callA();
    callB();
  }
});

Attempted alternate code for function b

jQuery(document).load(function callB(id) {
  jQuery.ajax({
    type: 'post',
    url: my_ajax.ajax_url,
    data: {
      action: 'options_function',
      cid: id
    },
    success: function(data) {
      jQuery(data).after('#cid_' + id)
      console.log(data);
      console.log(id);
    }
  });
});

callA();
//  callB();

EDIT 1- Add callb into the success of calla

jQuery(document).on('popup/show', (event, id) => {
  if (id === 123) {
    function callA() {
      jQuery.ajax({
        data: {
          action: 'list_count'
        },
        type: 'post',
        url: my_ajax.ajax_url,
        dataType: 'JSON',
        success: function(data) {
          var id = jQuery().data('id')
          var html = '';
          
          jQuery.each(data, function(key, value) {
            html += '<div class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all" id="' + value.id + '" style="display:table-row">';
            html += '<div class="image"  style="display: table-cell";>' + value.img + '</div>';
            html += '<div style="display: table-cell";>' + value.Name + '</div>';
            html += '<div  style="display: table-cell">' + value.Size + '</div>';
            html += '<div  style="display: table-cell"> ' + value.Number + ' </div>';
            html += '<div class="tdid_' + value.id + '"  style="display: table-cell">' + value.Status + '</div>';
            html += '</div>';
            html += '<div id="cid_' + value.id + '" class="bg_clear ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: table-cell">';
            html += '<div class="bg_clear ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: table-cell"></div>';
            html += '  </div>';
          });
          jQuery('#list').html(html);
            
    function callB(id) {
      jQuery.ajax({
        type: 'post',
        url: my_ajax.ajax_url,
        data: {
          action: 'options_function',
          cid: id
        },
        success: function(data) {
          jQuery(data).after('#cid_' + id)
          console.log(data);
          console.log(id);
        }
      });
    }
            
            
        }
      });
    }


    
    callA();
   callB();   /* <<<<<<<<<<< tried with this commented out or on, doesnt matter/*
  }
});

Edit 2 –
Original button code

<a href="javascript:void(0)" id="options-btn" class="button" onclick="function callB('+ value.id+')" data-id="'+ value.id+'"> </a>

function callA() {
 // ... code ...
}

function callB() {
 // ... code ...
}

jQuery(document).on('popup/show', (event, id) => {
  // you can run callA and/or callB however you want
});

function callA(callback) {
  jQuery.ajax({
    // ... ajax options ...
    success: function(data) {
      var id = jQuery().data('id');
      // you can pass functions as arguments to other functions! :)
      callback(id);
    }
  });
}

function callB(id) {
  // ... use 'id' here ...
}

jQuery(document).on('popup/show', (event, id) => {
  // pass callB as the callback to callA
  // callB will run after in callA's ajax success method
  callA(callB);
});

jQuery(document).on('popup/show', (event, id) => {
  if (id === 123) {
    function callA() {
      jQuery.ajax({
        data: {
          action: 'list_count'
        },
        type: 'post',
        url: my_ajax.ajax_url,
        dataType: 'JSON',
        success: function(data) {
          var id = jQuery().data('id')
          var html = '';

          jQuery.each(data, function(key, value) {
            html += '<div class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all" id="' + value.id + '" style="display:table-row">';
            html += '<div class="image"  style="display: table-cell";>' + value.img + '</div>';
            html += '<div style="display: table-cell";>' + value.Name + '</div>';
            html += '<div  style="display: table-cell">' + value.Size + '</div>';
            html += '<div  style="display: table-cell"> ' + value.Number + ' </div>';
            html += '<div class="tdid_' + value.id + '"  style="display: table-cell">' + value.Status + '</div>';
            html += '</div>';
            html += '<div id="cid_' + value.id + '" class="bg_clear ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: table-cell">';
            html += '<div class="bg_clear ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: table-cell"></div>';
            html += '  </div>';
          });
          jQuery('#list').html(html);
          callB(id);
        }
      });
    }

    function callB(id) {
      jQuery.ajax({
        type: 'post',
        url: my_ajax.ajax_url,
        data: {
          action: 'options_function',
          cid: id
        },
        success: function(data) {
          jQuery(data).after('#cid_' + id)
          console.log(data);
          console.log(id);
        }
      });
    }

    callA();
  }
});