选择表格行内的输入

Question

How can I show the div element with class .mynote once clicking on the input with id=title ? I tried the below code, but it doesn't work.

 $("#title").click(function() { $(".mynote").show(); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="tall-table"> <tbody> <tr> <td class="tall-data"> <div class="tall-note"> <div class="mynote" style="display:none"> some text here </div> </div> </td> </tr> <tr class="tall-data"> <td class="tall-label"> text ... </td> </tr> <tr> <td class="tall-data"> <input name="title" id="title"> </td> </tr> <tr class="tall-data"> <td class="tall-label"> text ... </td> </tr> </tbody> </table>

Answer 1

$( 'input#title' ).on( 'focus', function() {
    $(".mynote").show();
}).on( 'focusout', function() {
    $(".mynote").hide();
});

http://jsfiddle.net/7u0r8dvw/

Answer 2

<table class="tall-table">
<tbody>
  <tr>
    <td class="tall-data">
      <div class="tall-note">
      <div class="mynote" style="display:none">
      some text here
      </div>
      </div>
    </td>
  </tr>
  <tr class="tall-data">
    <td class="tall-label">
      text ...
    </td>
  </tr>
  <tr>
    <td class="tall-data">
      <input name="title" id="title">
    </td>
  </tr>
  <tr class="tall-data">
    <td class="tall-label">
      text ...
    </td>
  </tr>
</tbody>
</table>
<script>
    $(document).ready(function(){
        $("#title").click(function() {
            $( ".mynote" ).show();
        });
    });
</script>