How to hide a div when the user clicks outside of it?

Question

On following code I am trying to display ul element when user click in text field and hide it when user click somewhere out of div, it works well apart from a problem. ul element is going to be hidden I click a tag element(Share my location) and I don't get the coordinates in console. You have any idea where is my mistake?

HTML code:

<div id="location">
      <input id="where" type="text" maxlength="100" name="r" />
      <hr>
      <ul class="location-popup">
        <li>
          <a id="#share">&nbsp;Share my Location</a>
        </li>
      </ul>
</div>

Css :

.location-popup
 {
           display: none;
           padding: 15px;
           height: 50px;
           line-height: 30px;
           list-style-type: none;
           background-color: white;
           text-decoration: none; 

           a {
                font-size: 20px;
                padding-bottom: 15px;
                color: black;
                cursor: pointer;
              }
    }  
hr  {
      display: none;
      height: 0;
      padding: 0;
      margin: 0;
      position: absolute;
      border-color: #009fda;
      border-style: solid none none none;
      border-width: 1px;
      left: 15px;
      right: 15px;
    }

    div#location {
      border: 1px solid #009fda;
      border-radius: 3px;
      position: relative;
    }

    input#where {
      width: 100%;
      max-width: none !important;
      height: 68px;
      margin-bottom: 0;
      line-height: 50px;
      border: 1px solid #009fda;
      padding: 0px 15px;
      border: none;
      font-size: 20px;
      text-indent: 15px;
      outline: none;
    }

Jquery code:

    $(function() {
      $('#share').click(function() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(location) {
            console.log(location.coords.latitude);
            console.log(location.coords.longitude);
            console.log(location.coords.accuracy);
          });
        } else {
          console.log("Geolocation is not supported by this browser.");
        }
      });

      $("#where").click(function() {
        $('.location-popup').show();
        $('hr').show();
      });

      $("#where").keyup(function() {
        if ($("#where").val().length > 2) {
          $('.location-popup').hide();
          $('hr').hide();
        }
      });

      $('#location').focusout(function() {
        $('.location-popup').hide();
        $('hr').hide();
      });
    });

For demo look at here

Answer 1

Probably your UI is messing with it. I kept a minimal UI and ow it works good.

      <a id="share">&nbsp;Share my Location</a>
      <p id="coords">

      </p>

  var coords = document.querySelector('#coords');
  $('#share').click(function() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(location) {
        coords.innerHTML = location.coords.latitude+"\n"+location.coords.longitude;
      });
    } else {
      console.log("Geolocation is not supported by this browser.");
    }
  });

JSfiddle