title: How to modify an HTML variable in jQuery?
body: <p>I am wanting to optimize my code found here: <a href="http://codepen.io/leongaban/pen/fJGie" rel="nofollow noreferrer">http://codepen.io/leongaban/pen/fJGie</a></p>
  
  <p>Currently I have <code>var inputphone</code> which contains the default HTML for an input field.</p>
  
  <pre><code>var inputphone = $("&lt;li&gt;&lt;label&gt;&lt;/label&gt;&lt;br/&gt;&lt;input type='tel' pattern='[0-9]{10}' 
  class='added_phone' name='' value='' autocomplete='off' maxlength='20' /&gt;&lt;/li&gt;");
  </code></pre>
  
  <p>From a select dropdown field I have several types the user can choose from (mobile, work, etc...) At the moment when the user selects a certain field I basically have to reuse the default HTML every time.</p>
  
  <p><img src="https://i.stack.imgur.com/hLh3I.png" alt="enter image description here"></p>
  
  <p>Is there a way that I can for example just put the default inputphone HTML into another variable like mobile_phone and then insert a string into the label, or into the name fields?</p>
  
  <p><em>Something kinda like</em><br/>
  <code>mobile_phone.label = "Mobile Phone"</code> or <code>mobile_phone.html.find('label')</code>?</p>
  
  <p><br/></p>
  
  <p>Current code:</p>
  
  <pre><code>// Default Phone Input
  var inputphone = $("&lt;li&gt;&lt;label&gt;&lt;/label&gt;&lt;br/&gt;&lt;input type='tel' pattern='[0-9]{10}'
  class='added_phone' name='' value='' autocomplete='off' maxlength='20' /&gt;&lt;/li&gt;");
  
  // Create new input for Mobile Phone
  var mobile_phone = inputphone;
  mobile_phone.html("&lt;li&gt;&lt;label&gt;Mobile Phone&lt;/label&gt;&lt;br/&gt;&lt;input type='tel' pattern='[0-9]{10}' 
  class='added_phone' name='mobile phone' value='' autocomplete='off' maxlength='20' /&gt;&lt;/li&gt;");
  
  // Add the Mobile Phone input to the page
  $('.new_option').append(mobile_phone);
  </code></pre>