title: Set multiple <span>'s texts with JQuery
body: <p>I have this markup in asp.net mvc4 app.</p>
  
  <pre><code>&lt;div style="margin-top: 35px; margin-right: 10px; padding-left:2px; border: solid 1px #DCE8E8; height:230px;"&gt;
                          We are located at 
                          &lt;span id="txtPhysicalAdd"/&gt;&lt;br /&gt;
                          &lt;div&gt;&lt;span id="txtPostalAdd"/&gt;&lt;br /&gt;&lt;/div&gt;
                          &lt;div&gt;Phone#&lt;br /&gt;&lt;/div&gt;
                          &lt;div&gt;&lt;span id="txtMobile1_2"/&gt;&lt;span id="txtMobile2"/&gt;&lt;br /&gt;&lt;/div&gt;
                          &lt;span id="txtTown"/&gt;&lt;br /&gt;
                          &lt;span id="txtTelephone1"/&gt;&lt;br /&gt;
                          &lt;label id="txtCountry"/&gt;&lt;br /&gt;
                          &lt;a href="@Url.Content("~/site/Contact/ContactUs")"&gt;&lt;span id="txtEmail"/&gt;&lt;/a&gt;
                          &lt;br /&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>In the left Nav panel I want to set contact info. It is in the _layout.cshtml hence the use of this JQuery snippet.</p>
  
  <pre><code> $(document).ready(function () { 
  var url = '@Url.Action("GetPrimaryContact","Contact")';
          $.ajax({
              type: "POST",
              url: url,
              success: function(returndata) {
      if (returndata.ok) {
                          var physicalAdd = returndata.data.PhysicalAddress;
                          var postalAdd = returndata.data.PostalAddress;
                          var mobile1 = returndata.data.Mobile1;
                          var mobile2 = returndata.data.Mobile2;
                          var telephone1 = returndata.data.Telephone1;
                          var town = returndata.data.City;
                          var country = returndata.data.SelectedCountryName;
                          var email = returndata.data.Email;
                          $('#txtPhysicalAdd').text(physicalAdd);
                          $('#txtPostalAdd').text(postalAdd);
                          $('#txtMobile1').text(mobile1);
                          $('#txtMobile1_2').text(mobile1);
                          $('#txtMobile2').text(mobile2);
                          $('#txtTown').text(town);
                          $('#txtTelephone1').text(telephone1);
                          $('#txtCountry').text(country);
                          $('#txtEmail').text(email);
                          //window.alert(' email : ' + mobile2);
                  }
                  else {
                      window.alert(' error : ' + returndata.message);
                  }
              }
          });
  </code></pre>
  
  <p>Problem is on running it it populate only the fisrt value of such the when I Firebug-inspect element I see </p>
  
  <pre><code>&lt;div style="margin-top: 35px; margin-right: 10px; padding-left:2px; border: solid 1px #DCE8E8; height:230px;"&gt;
  We are located at
  &lt;span id="txtPhysicalAdd"&gt;Kahawa wendani opposite Kahawa Garrison&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>if I comment any of the field in the JQuery, the first in the remaining is polulated and the rest ignored. Also if I have another field e.g in page header it is mapped but ignored in my div above. Please assist. :)</p>