title: passing data values from inner function to inner function with js/jquery
body: <p>I am combining two functions into a single function and need to pass the value of my <code>id</code> from <code>calla()</code> to <code>callb()</code> so <code>callb()</code> can also use that information in its AJAX call. When these were two different functions, a button was clicked which triggered my <code>callb()</code> function and passed the <code>id</code> to it. Now that they are one single function with two calls, I am uncertain how to pass this along.</p>
  <p>I know it's going to be some type of event listener but when I wrap <code>callb()</code> in a <code> jQuery(document).load(</code> then it tells me <code>callb()</code> is undefined. If I remove <code>callb()</code> then it doesn't run the function at all.</p>
  <pre class="lang-js prettyprint-override"><code>jQuery(document).on('popup/show', (event, id) =&gt; {
    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 += '&lt;div class=&quot;accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all&quot; id=&quot;' + value.id + '&quot; style=&quot;display:table-row&quot;&gt;';
              html += '&lt;div class=&quot;image&quot;  style=&quot;display: table-cell&quot;;&gt;' + value.img + '&lt;/div&gt;';
              html += '&lt;div style=&quot;display: table-cell&quot;;&gt;' + value.Name + '&lt;/div&gt;';
              html += '&lt;div  style=&quot;display: table-cell&quot;&gt;' + value.Size + '&lt;/div&gt;';
              html += '&lt;div  style=&quot;display: table-cell&quot;&gt; ' + value.Number + ' &lt;/div&gt;';
              html += '&lt;div class=&quot;tdid_' + value.id + '&quot;  style=&quot;display: table-cell&quot;&gt;' + value.Status + '&lt;/div&gt;';
              html += '&lt;/div&gt;';
              html += '&lt;div id=&quot;cid_' + value.id + '&quot; class=&quot;bg_clear ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom&quot; style=&quot;display: table-cell&quot;&gt;';
              html += '&lt;div class=&quot;bg_clear ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom&quot; style=&quot;display: table-cell&quot;&gt;&lt;/div&gt;';
              html += '  &lt;/div&gt;';
            });
            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();
    }
  });
  </code></pre>
  <p>Attempted  alternate code for <code>function b</code></p>
  <pre class="lang-js prettyprint-override"><code>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();
  </code></pre>
  <p>EDIT 1- Add <code>callb</code> into the success of <code>calla</code></p>
  <pre><code>jQuery(document).on('popup/show', (event, id) =&gt; {
    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 += '&lt;div class=&quot;accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all&quot; id=&quot;' + value.id + '&quot; style=&quot;display:table-row&quot;&gt;';
              html += '&lt;div class=&quot;image&quot;  style=&quot;display: table-cell&quot;;&gt;' + value.img + '&lt;/div&gt;';
              html += '&lt;div style=&quot;display: table-cell&quot;;&gt;' + value.Name + '&lt;/div&gt;';
              html += '&lt;div  style=&quot;display: table-cell&quot;&gt;' + value.Size + '&lt;/div&gt;';
              html += '&lt;div  style=&quot;display: table-cell&quot;&gt; ' + value.Number + ' &lt;/div&gt;';
              html += '&lt;div class=&quot;tdid_' + value.id + '&quot;  style=&quot;display: table-cell&quot;&gt;' + value.Status + '&lt;/div&gt;';
              html += '&lt;/div&gt;';
              html += '&lt;div id=&quot;cid_' + value.id + '&quot; class=&quot;bg_clear ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom&quot; style=&quot;display: table-cell&quot;&gt;';
              html += '&lt;div class=&quot;bg_clear ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom&quot; style=&quot;display: table-cell&quot;&gt;&lt;/div&gt;';
              html += '  &lt;/div&gt;';
            });
            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();   /* &lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt; tried with this commented out or on, doesnt matter/*
    }
  });
  </code></pre>
  <p>Edit 2 -
  Original button code</p>
  <pre><code>&lt;a href=&quot;javascript:void(0)&quot; id=&quot;options-btn&quot; class=&quot;button&quot; onclick=&quot;function callB('+ value.id+')&quot; data-id=&quot;'+ value.id+'&quot;&gt; &lt;/a&gt;
  </code></pre>