title: Show/hide clear icon inside input field not working properly
body: <p>I have created an input with an icon that clears the input text.</p>
  
  <p>I initially have it set to display:none. 
  When you focus on the input, the clear icon appears which is what I want, but when you click the clear icon it disappears and does not clear the input text, but then only reappears when you focus on the input again, which I dont want it to do this, as it should stay visible only until you click out of the input, then it should hide...</p>
  
  <p>So the use case should be:</p>
  
  <ol>
  <li>the clear icon should initially be set to hidden (in css or can be jQuery)</li>
  <li>the clear icon should show when you focus on input</li>
  <li>the clear icon should hide again, when you click out of the input</li>
  </ol>
  
  <p>My script is not working properly, and I have tried a number of ways to work it out myself but nope, cant figure it out.</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>$("input")
    .focus(function() {
      $(this).attr("placeholder", "enter your email address...");
      $(".material-icons").show();
    })
    .blur(function() {
      $(".material-icons").hide();
      $(this).attr("placeholder", "input here");
      $(".clear-input").click(function() {
        $(this).prev().val("").focus();
      });
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    box-sizing: border-box;
  }
  
  form {
    margin: 20vh;
  }
  
  .container {
    border: none;
    width: 248px;
    position: relative;
  }
  
  input {
    border: 1px solid pink;
    box-shadow: none;
    padding: 8px 100px 8px 5px;
    position: relative;
  }
  
  input:hover {
    border: 1px solid #222;
  }
  
  input:focus {
    border: 1px solid blue;
  }
  
  .material-icons {
    position: absolute;
    right: 0px;
    top: 0px;
    margin: auto;
    font-size: 3px;
    cursor: pointer;
    color: #aaa;
    padding: 8px;
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;form&gt;
    &lt;div class="container"&gt;
      &lt;input class="type-here" type="text" placeholder="input here" /&gt;
      &lt;i class="clear-input material-icons"&gt;clear&lt;/i&gt;
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>