title: Jquery code that adds tel: only to mobile browsers
body: <p>I have a jquery code that adds the tel: link to a style in a span around a phone number but it only works for one phone number. I have a page with 20 different phone numbers and when I add the style to all of the phone numbers it will populate all 20 tel: links with the last phone number in the list to all of the tel: links.</p>
  
  <p>How can I make the tel: link for each phone number populate correctly? Currently It populates just the last phone number in the list to all of the tel: links.</p>
  
  <p>Any help would be much appreciated!</p>
  
  <pre><code>$(document).ready(function() {
      // if Modernizr detects class "touch"
      if($('html').hasClass('touch')) {
          // for each element with class "make-tel-link"
          $(".make-tel-link").each(function () {
          //$.each(".make-tel-link", function () {
              var jPhoneNumber = $(this).text();
              // wrap phone with href="tel:" and then insert phone number
              $(this).wrapInner('&lt;a class="jPhoneLink" href=""&gt;&lt;/a&gt;');
              $('.jPhoneLink').attr('href', 'tel:'+jPhoneNumber);
          });
      }   
  });
  </code></pre>
  
  <p>Here is an example of the markup.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html class="touch"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
    &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
    &lt;meta name="apple-mobile-web-app-status-bar-style" content="black"&gt;
  
    &lt;title&gt;&lt;/title&gt;
  
  
  
    &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css"&gt;
  
  
    &lt;!-- Extra Codiqa features --&gt;
    &lt;link rel="stylesheet" href="codiqa.ext.css"&gt;
  
    &lt;!-- jQuery and jQuery Mobile --&gt;
    &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"&gt;&lt;/script&gt;
    &lt;script src="codiqa.ext.js"&gt;&lt;/script&gt;
    &lt;script src="modernizr.custom.39046.js"&gt;&lt;/script&gt;
  
  
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;!-- Home --&gt;
  &lt;div data-role="page" id="page2"&gt;
      &lt;div data-theme="a" data-role="header"&gt;
          &lt;div id="head"&gt; &lt;strong&gt;Contacts&lt;/strong&gt;&lt;/div&gt;
          &lt;div data-role="navbar" data-iconpos="left"&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;a href="index.php" data-transition="fade" data-theme="" data-icon=""&gt;
                          home
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="3.php" data-transition="fade" data-theme="" data-icon=""&gt;
                          contact
                      &lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div data-role="content"&gt;
  
      &lt;h1&gt;CONTACT US&lt;/h1&gt;
  &lt;div class="layout"&gt;
  &lt;h4&gt;Headquarters&lt;/h4&gt;
  4235345 High bar&lt;br /&gt;
  Suite 345&lt;br /&gt;
  Quence, AL 45205
  &lt;br /&gt;
  &lt;h4&gt;Customer Service&lt;/h4&gt;
  info@fgfghgdgh.com&lt;br /&gt;
  &lt;span  class="make-tel-link"&gt;888-555-5555&lt;/span&gt;&lt;br /&gt;
  &lt;span  class="make-tel-link"&gt;800-555-5555&lt;/span&gt;&lt;br /&gt;
  &lt;span  class="make-tel-link"&gt;866-555-5555&lt;/span&gt;&lt;br /&gt;
  
  &lt;/div&gt;&lt;br /&gt;
  &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>