Условные формы с помощью jQuery Mobile

У меня есть этот многопользовательский скрипт:

<script>
$( document ).bind( "pageinit", function( event, data ) {
    $("#ppreg").hide();
    $("#smsreg").hide();
    $("#UserName").hide();
    $(".group1").hide();
    $(".group2").hide();
    $(".group0").hide();

$('#selectcode').change(function() {
      var regtype = $("#selectcode option:selected").val();
        if (regtype == "@") {
          $("#ppreg").show();
          $("#smsreg").hide();
          $("#UserName").show();
          $(".group1").show();
          $(".group2").hide();
          $(".group0").show();          
        } else {
          $("#ppreg").hide();
          $("#smsreg").show();
          $("#UserName").show();
      $(".group2").show();
          $(".group1").hide();
          $(".group0").show();  
       }
 });
});
    </script>

Область 1: показать две разные метки, основанные на выбранном значении. Область 2: показать все остальные поля после выбора кода страны

В этой форме он отлично работает:

 <label for="selectcode" class="select">LABEL"; 
 <select name="countrycode" id="selectcode" data-native-menu=\"true">
<option value="@">email (email field)</option>
    <option value="+39" >SMS:(+39)</option>
    </select>
<fieldset data-role="collapsible" data-theme="b" data-content-theme="d" data-collapsed="false">"
    <legend>"._LOGIN."</legend>"

<div class="group0>"

<label for="UserName" id="smsreg" >Username1</label>
     <label for="UserName" id="ppreg" >Username 2</label>
     ---- A
    <input title="TITLE" type="text" name="UserName" value="" class="required"  id="UserName" data-clear-btn="true"  />"
     ----- //A
   <div class="group0">
   <label class="group0" for="Password">Password:</label>
   <input class="group0" type="password" name="Password"   value="" id="Password" data-clear-btn="true"  placeholder="Password" /> 
.. MORE FIELDS ..
<button id="login" type="submit" value="validate!" data-theme="b">LOGIN</button> 
   </div>

но если я изменю приведенный выше html (A), чтобы получить два разных поля типа ввода для UserName (tel или email), макет выглядит отлично, но форма присваивает пустое значение для UserName, когда я выбираю первый вариант (tel):

     ----- A1
    <div class="group2">
    <input title="TITLE1" type="tel" name="UserName" value="" class="required group2"  id="UserName" data-clear-btn="true"  />"
    </div>
    <div class="group1">
    <input title="TITLE2" type="email" name="UserName" value="" class="required group1"  id="UserName" data-clear-btn="true"  />
   </div>
   ------- // A1

Причина ясна, вопрос в том, что любой может предложить мне, как избежать этой проблемы?