title: Updating Div Container using AJAX and Javascript
body: <p>Hello I would like to have a div container update after clicking one of the blue buttons. To do this I have incorporated JSON, AJAX JavaScript. Unfortunately I cannot get anything to appear. Any advice would be greatly appreciated.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="list"&gt;
    &lt;ul&gt;
      &lt;li id="header1" class ="inactive"&gt;&lt;h2&gt;Upper Body&lt;/h2&gt;&lt;/li&gt;
      &lt;li id="front neck" class= "upper"&gt;Front Neck&lt;span&gt;&lt;img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/front-neck2.png"/&gt;&lt;/span&gt;&lt;/li&gt;
      &lt;li id="back neck" class= "upper"&gt;Back Neck&lt;span&gt;&lt;img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Back-Neck-2.png"/&gt;&lt;/span&gt;&lt;/li&gt;
      &lt;li id="trapezius" class= "upper"&gt;Trapezius&lt;span&gt;&lt;img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Traps2.png"/&gt;&lt;/span&gt;&lt;/li&gt;
      &lt;li id="shoulder" class= "upper"&gt;Shoulder&lt;span&gt;&lt;img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Interior-Deltoid2.png"/&gt;&lt;/span&gt;&lt;/li&gt;
      &lt;li id="bicep" class= "upper"&gt;Bicep&lt;span&gt;&lt;img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Bicep-2.png"/&gt;&lt;/span&gt;&lt;/li&gt;
      &lt;li id="tricep" class= "upper"&gt;Tricep&lt;span&gt;&lt;img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Tricep2.png"/&gt;&lt;/span&gt;&lt;/li&gt;
      &lt;li id="forearm extensor" class= "upper inactive"&gt;Forearm Extensor&lt;span&gt;&lt;img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/extensor2.png"/&gt;&lt;/span&gt;&lt;/li&gt;
      &lt;li id="forearm flexor" class= "upper"&gt;Forearm Flexor&lt;span&gt;&lt;img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/FLEXER2.png"/&gt;&lt;/span&gt;&lt;/li&gt;
      &lt;li id="header2" class="inactive"&gt;&lt;h2&gt;Lower Body&lt;/h2&gt;&lt;/li&gt;
      &lt;li id="hamstring" class="lower"&gt;Hamstring&lt;span&gt;&lt;img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Hammy2.png"/&gt;&lt;/span&gt;&lt;/li&gt;
      &lt;li id="calf" class="lower"&gt;Calf&lt;span&gt;&lt;img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Calf2.png"/&gt;&lt;/span&gt;&lt;/li&gt;
      &lt;li id="it" class="lower"&gt;IT Band&lt;span&gt;&lt;img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/IT-BAND-2.png"/&gt;&lt;/span&gt;&lt;/li&gt;
      &lt;li id="adductor" class="lower"&gt;Adductor&lt;span&gt;&lt;img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Addcutor2.png"/&gt;&lt;/span&gt;&lt;/li&gt;
      &lt;li id="quadricep" class="lower"&gt;Quadricep&lt;span&gt;&lt;img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Quad2.png"/&gt;&lt;/span&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="list-container"&gt;
    &lt;ul id ="container"&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>  body {
    padding-top: 80px;
    text-align: center;
    font-family: monaco, monospace;
  
  }
  h1 {
    font-size: 30px
  }
  h2 {
    font-size: 20px;
  }
  span {
    background: #fd0;
  }
  ul {
   list-style-type: none; 
  }
  #header1, #header2 {
      background-color: white;
      color: black;
      border: 2px solid #4CAF50;
      margin: 0 0 10px 0;
  }
  
  #header1:hover, #header2:hover, #header1:active, #header2:active {
      background-color: #4CAF50;
      color: white;
  }
  .upper, .lower {
      background-color: white;
      color: black;
      border: 2px solid #008CBA;
      margin: 0 0 10px 0;
      padding: 10px 5px;
  }
  
  .upper:hover, .lower:hover {
      background-color: #008CBA;
      color: white;
  }
  #list {
      position: relative;
      width: 300px;
  }
   span { /*CSS for enlarged image*/
  position: absolute;
  background-color: white;
  left: -1005px;
  visibility: hidden;
  }
  
  .upper:hover span, .lower:hover span{ /*CSS for enlarged image*/
  visibility: visible;
  top: 0;
  left: 320px; /*position where enlarged image should offset horizontally */
  z-index: 50;
  }
  #highlight{
   height: 500px;
   width: 500px;
  }
  #list-container{
    border: 2px solid white;
    padding:10px;
    height: 350px;
    width: 200px;
    position: relative;
    right: 0px;
  }
  #front-neck{
   left: 300px;
   position: relative;
   bottom: 400px;
  }
  #img{
    height:85px;
    width: 200px;
  }
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>var jsonString = {
      "stretches":[
          {"area":"front-neck","name":"front-neck","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/fneck1.jpg","type":"static"},
          {"area":"back-neck","name":"back-neck","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/IMG_1173.jpg","type":"static"},
          {"area":"side-neck","name":"side-neck","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/sideNeck.jpg","type":"static"},
          {"area":"entire-neck","name":"neck-rolls","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/neckRollStretch.jpg","type":"dynamic"},
          {"area":"trapezius","name":"upper-trapezius","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/trapStretch3.jpg","type":"static"},
          {"area":"trapezius","name":"lower-trapezius","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/trapStretch.jpg","type":"static"},
          {"area":"trapezius","name":"trapezius","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/trapStretch2.jpg","type":"dynamic"},
          {"area":"shoulder","name":"shoulder-raise","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/shoulderRaise.jpg","type":"static"},
          {"area":"shoulder","name":"shoudler","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/IMG_1198.jpg","type":"static"},
          {"area":"shoulder","name":"arm-circles","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/shoulderCircles.jpg","type":"dynamic"},
          {"area":"shoulder","name":"elbow-circles","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/elbowCircles.jpg","type":"dynamic"},
          {"area":"shoulder","name":"upward-shoulder","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/upwardShoulder.jpg","type":"static"},
          {"area":"triceps","name":"tricep","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/tricepStretch.jpg","type":"static"},
          {"area":"triceps","name":"tricep-side","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/tricepSideStretch.jpg","type":"static"},
          {"area":"biceps","name":"standing-bicep","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/bicepStanding.jpg","type":"static"},
          {"area":"biceps","name":"seated-bicep","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/bicepSeated.jpg","type":"static"},
          {"area":"biceps","name":"bicep-side","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/bicepSide.jpg","type":"static"},
          {"area":"forearm","name":"forearm-bench","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/forearmTable.jpg","type":"static"},
          {"area":"forearm","name":"standing-forearm","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/forearmWall.jpg","type":"static"},
          {"area":"forearm","name":"wrist-circles","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/wristCircles.jpg","type":"dynamic"},
          {"area":"it-band","name":"seated-glute","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/seatedGlute.jpg","type":"static"},
          {"area":"it-band","name":"ankle-to-knee","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/ankleToKneeGlute.jpg","type":"static"},
          {"area":"it-band","name":"across-body","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/acrossBody.jpg","type":"static"},
          {"area":"it-band","name":"leg-swings","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/legSwings.jpg","type":"dynamic"},
          {"area":"hamstring","name":"leg-swings","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/legSwingsHam.jpg","type":"dynamic"},
          {"area":"hamstring","name":"hamstring","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/hamstring.jpg","type":"static"},
          {"area":"hamstring","name":"walking-kicks","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/hamstringWalking.jpg","type":"dynamic"},
          {"area":"hamstring","name":"lying-hamstring","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/IMG_1217.jpg","type":"static"},
          {"area":"hamstring","name":"leg-up-hamstring","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/legUpHamstring.jpg","type":"dynamic"},
          {"area":"calf","name":"ankle-circles","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/ankleCircles.jpg","type":"dynamic"},
          {"area":"calf","name":"calf-wall","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/wallCalf.jpg","type":"static"},
          {"area":"calf","name":"seated-calf","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/seatedCalf.jpg","type":"static"},
          {"area":"calf","name":"stair-calf","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/stairCalf.jpg","type":"static"},
          {"area":"adductor","name":"butterly","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/butterflyAdductor.jpg","type":"static"},
          {"area":"adductor","name":"standing-groin","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/standingAdductor.jpg","type":"static"},
          {"area":"adductor","name":"leg-swings","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/legSwings.jpg","type":"dynamic"},
          {"area":"adductor","name":"sumo","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/sumoAdductor.jpg","type":"dynamic"},
          {"area":"quadricep","name":"kneeling-quadricep","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/kneelingQuad-1.jpg","type":"static"},
          {"area":"quadricep","name":"lying-quadricep","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/lyingQuad.jpg","type":"static"},
          {"area":"quadricep","name":"bench-quadricep","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/benchQuad.jpg","type":"static"},
          {"area":"quadricep","name":"scorpion","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/scorpionQuad.jpg","type":"dynamic"},
          {"area":"quadricep","name":"sitting-quadricep","pic":"http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/07/sittingQuadricep.jpg","type":"static"}
      ]
  }
  
  $(function() {
    $("li.upper").hide();
    $("li.lower").hide();
    $("#header1").on('click', function() {
      $("li.upper").slideToggle();
      var buttonState = $("li#header1").attr("class");
      if(buttonState == "inactive"){
      $("li#header1").removeClass("inactive");
      $("li#header1").addClass("active");
      $(this).css({
        "background": "#4CAF50",
        "color": "white"
      });
      } else {
      $("li#header1").removeClass("active");
      $("li#header1").addClass("inactive");
      $(this).css({
        "background": "white",
        "color": "black"
      });
      }
    });
    $("#header2").click(function() {
      $("li.lower").slideToggle();
      var buttonState = $("li#header2").attr("class");
      if(buttonState == "inactive"){
          $("li#header2").removeClass("inactive");
          $("li#header2").addClass("active");
       $(this).css({
           "background": "#4CAF50",
           "color": "white"
      });
      } else {
       $("li#header2").removeClass("active");
       $("li#header2").addClass("inactive");
       $(this).css({
           "background": "white",
           "color": "black"
      });
      }
  });
  
  //THIS IS THE AREA I'M TRYING TO FIX!!!
  
      var myData = jsonString;
      var newContent = '';
      var selected = null;
      $('li').click(function(e){
              e.preventDefault();
          for(var i = 0; i &lt; myData.stretches.length; i++){
              if(selected == myData.stretches[i].area){
                  newContent += '&lt;li id = "' +img+ '" class = "'+ myData.stretches[i].area +'"&gt;';
                  newContent += '&lt;a href="'+myData.stretches[i].ref+'"&gt;';
                  newContent += '&lt;img src="'+myData.stretches[i].pic+'"&gt;';
                  //newContent += '&lt;p "'+responseObject.stretches[i].name+'"&gt;';
                  newContent += '&lt;/a&gt; + &lt;/li&gt;';
              }
          }
      document.getElementById('container').innerHtml = newContent;
          });
  });
  </code></pre>