title: hide div depending on ajax response result
body: <p>I want to hide a div depending on the result of the response from an ajax call to my server. My server is responding with an object <code>{available: yes/no}</code> depending on the domain and username searched for. If the response if <code>yes</code> I want to maintain the div on the available column of my html and hide the corresponding div on the unavailable column and if the response is <code>no</code> hide the div on the available column and maintain the div visible on the unavailable column. 
  My problem is attaching each response to the corresponding div. How could I do this?</p>
  
  <p>html:</p>
  
  <pre><code>  &lt;div id="searchresults"&gt;
                  &lt;div id="available"&gt;
                  &lt;h4&gt;&lt;span class="username"&gt;&lt;/span&gt;&lt;span class="positive-result"&gt;is available&lt;/span&gt; as a username on:&lt;/h4&gt;
                      &lt;div class="facebook"&gt; &lt;!--Class to hide and show this div can be toggled with jQuery --&gt;
                          &lt;a href="https://www.facebook.com/"&gt;&lt;i class="fa fa-facebook-square"&gt;&lt;/i&gt;Facebook&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="pinterest"&gt; &lt;!--Class to hide and show this div can be toggled with jQuery --&gt;
                          &lt;a href="https://www.pinterest.com/join/"&gt;&lt;i class="fa fa-pinterest"&gt;&lt;/i&gt;Pinterest&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="twitter"&gt; &lt;!--Class to hide and show this div can be toggled with jQuery --&gt;
                          &lt;a href="https://twitter.com/signup"&gt;&lt;i class="fa fa-twitter"&gt;&lt;/i&gt;Twitter&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="instagram"&gt; &lt;!--Class to hide and show this div can be toggled with jQuery --&gt;
                          &lt;a href="http://instagram.com/"&gt;&lt;i class="fa fa-instagram"&gt;&lt;/i&gt;Instagram&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="github"&gt; &lt;!--Class to hide and show this div can be toggled with jQuery --&gt;
                          &lt;a href="https://github.com/join"&gt;&lt;i class="fa fa-github"&gt;&lt;/i&gt;GitHub&lt;/a&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt; &lt;!--End of #available--&gt;
  
                  &lt;div id="unavailable"&gt;
                      &lt;h4&gt;&lt;span class="username"&gt;&lt;/span&gt;&lt;span class="negative-result"&gt;is not available&lt;/span&gt;  as a username on:&lt;/h4&gt;
                          &lt;div class="facebook-unavailable"&gt; &lt;!--Class to hide and show this div can be toggled with jQuery --&gt;
                              &lt;a href="https://www.facebook.com/"&gt;&lt;i class="fa fa-facebook-square"&gt;&lt;/i&gt;Facebook&lt;/a&gt;
                          &lt;/div&gt;
                          &lt;div class="pinterest-unavailable"&gt; &lt;!--Class to hide and show this div can be toggled with jQuery --&gt;
                              &lt;a href="https://www.pinterest.com/join/"&gt;&lt;i class="fa fa-pinterest"&gt;&lt;/i&gt;Pinterest&lt;/a&gt;
                          &lt;/div&gt;
                          &lt;div class="twitter-unavailable"&gt; &lt;!--Class to hide and show this div can be toggled with jQuery --&gt;
                              &lt;a href="https://twitter.com/signup"&gt;&lt;i class="fa fa-twitter"&gt;&lt;/i&gt;Twitter&lt;/a&gt;
                          &lt;/div&gt;
                          &lt;div class="instagram-unavailable"&gt; &lt;!--Class to hide and show this div can be toggled with jQuery --&gt;
                              &lt;a href="http://instagram.com/"&gt;&lt;i class="fa fa-instagram"&gt;&lt;/i&gt;Instagram&lt;/a&gt;
                          &lt;/div&gt;
                          &lt;div class="github-unavailable"&gt; &lt;!--Class to hide and show this div can be toggled with jQuery --&gt;
                              &lt;a href="https://github.com/join"&gt;&lt;i class="fa fa-github"&gt;&lt;/i&gt;GitHub&lt;/a&gt;
                          &lt;/div&gt;
  
                  &lt;/div&gt; &lt;!--End of #unavailable--&gt;
  </code></pre>
  
  <p>Javascript using jQuery</p>
  
  <pre><code>$(document).ready(function(){
    console.log("Ready!");
  
    var domains=[ ];
      domains.push($(".facebook").find("a").text());
      domains.push($(".github").find("a").text());
      domains.push($(".twitter").find("a").text());
      domains.push($(".instagram").find("a").text());
      domains.push($(".pinterest").find("a").text());
    // console.log(domains);
  
  
    $("#searchbutton").on('click', function(event){
  
      var username = $("#searchname").val().trim(); // store value from searchbox
      console.log(username);
  
      if(username === ""){
        event.preventDefault();
      }
  
      if(username){
        var newhtml = "&lt;p&gt;";
        newhtml += username;
        newhtml += "&lt;/p&gt;";
        $(".username").html(newhtml);
        $(".username").remove("newhtml");
  
        var domainCheck = function(domainName){
          $.ajax({
            url: "/"+username,
            type: "get",
            data: {domainName: domainName, username: username},
            success: function(response){
              console.log(domainName);
              console.log(response.available);
  
  //hide show logic here
                  var elem = $("#available").find("div"); returns an array of divs for each search result
                  console.log(elem); 
  
              }
          });
        };
  
        //send ajax request to server for each domain name to check for username availability
          var len = domains.length;
          for(var i = 0; i&lt;len; i++){
            domainCheck(domains[i]);
            console.log(domains[i]+'\n');
          }
      }
    });
  });
  </code></pre>