title: How to get jquery selector from event handler
body: <p>I have several input elements on a page and one of them (the first one) is where I can enter in a specific id of any of the other elements. </p>
  
  <p>I want my code set up in such a way that when i focus on any of the other elements and its id matches the text that was entered in the first element, it is highlighted and a text indicating i selected the correct element is displayed within it. </p>
  
  <p>I use the text entered in the first input element to form the id that I am looking for.</p>
  
  <p>So far this is what i have.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
       var selector; 
       
       $('#selector').on('input', function() {
           selector = $(this).val();
       });
       $('#' + selector).on('focus', function() {
           if ($(this).is('#' + selector)) {
               $(this).val("that's me: " + selector).css('border', 'solid red 1px');
           }
       }).on('blur', function() {
           $(this).val('').css('border', 'solid #555 1px');
       });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;input id='selector' type='text' /&gt;&lt;br /&gt;
  &lt;input id='target1' type='text' /&gt;&lt;br /&gt;
  &lt;input id='target2' type='text' /&gt;&lt;br /&gt;
  &lt;input id='target3' type='text' /&gt;&lt;br /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>After entering the id of anyone of the target input elements in the first input, I set the "selector" value. However, my focus handler seems not to be firing for any of the other input elements and no error is reported on the console. What could be the problem.</p>