title: How to split jQuery variables to be processed with .on() in paralell?
body: <p>At the beginning, I tried to merge similar variables, to be <em>simultaneously</em> (in paralell) processed with a bunch of similar jQuery methods. Used .merge([ ]) as a try, and got unwanted <em>sequential</em> execution.</p>
  
  <p>The code:</p>
  
  <pre><code>var $title = $('[id^=title-]');
  var $postmeta = $('[id^=meta-]');
  $([$title, $postmeta]).each(function(){
      $(this).html($(this).text().replace(/./g, "&lt;span&gt;$&amp;&lt;/span&gt;").replace(/\s/g, "&amp;nbsp;"))
      .on('inview', function(event, isInView) {
      if (isInView) {
          // do inbound things
      }
      else {
          // do outbound things
      }
    });
  });
  </code></pre>
  
  <p><em>note: I took a piece of jQuery from <a href="https://codereview.stackexchange.com/questions/126451/splitting-text-into-individual-characters-for-animation">here</a> (that code is similar, but this question is more precise).</em></p>
  
  <p><strong>Now I need</strong> to split the output, in order each variable was passed to <code>.on()</code> in paralell, but with previously granted attributes.</p>
  
  <p>Edit: added snippet.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*
   CSS Reset
  */
     html,body,div,span,applet,object,iframe,audio,video,h1,h2,h3,h4,h5,h6,h7,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark {
   vertical-align: baseline;
  }
  #title-, #meta- {
      position: relative;
  }
  #title- span, #meta- span  {
   position: relative;
   display:inline-block;
   -webkit-font-smoothing:antialiased;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
      jQuery(document).ready(function($){
      var $title = $('[id^=title-]');
      var $postmeta = $('[id^=meta-]');
      $([$title, $postmeta]).each(function(){
       $(this).html($(this).text().replace(/./g, "&lt;span&gt;$&amp;&lt;/span&gt;").replace(/\s/g, "&amp;nbsp;"))
       .on('inview', function(event, isInView) {
          if (isInView) {
            TweenMax.staggerFromTo( $($title).find("span"), 0.4, {autoAlpha:0, rotationX:-90, top:"-30px"}, {autoAlpha:1, rotationX:0, top:"0px"}, 0.1 );
            TweenMax.staggerFromTo( $($postmeta).find("span"), 0.09, {autoAlpha:0, scale:2}, {autoAlpha:1, scale:1}, 0.01 );
            
          }
       else {
  TweenMax.staggerFromTo( $($title).find("span"), 0.4, {autoAlpha:1, rotationX:0, top:"0px"}, {autoAlpha:0, rotationX:-90, top:"-30px"}, 0.1 );
  TweenMax.staggerFromTo( $($postmeta).find("span"), 0.09, {autoAlpha:1, scale:1}, {autoAlpha:0, scale:2}, 0.01 );
         }
        });
        });
        
      });
      &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div id="title-1"&gt;This is title 1&lt;/div&gt;
      &lt;div id="title-2"&gt;This is title 2&lt;/div&gt;
      &lt;div id="meta-1"&gt;To start animation, click Run. &lt;/div&gt;
      &lt;div id="meta-2"&gt;Then click here, or resize the height of this window (simulate 'inview' event). &lt;/div&gt;
      &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>