the same block of elements visible one at a time and veriable naming
<p>I have some code for mobile and a desktop version. All the elements in the FORM are the same, but the block of code is visible one at a time depends on the screen size (one is always set to <code>display: none</code>), </p>

<pre><code>&lt;div id="desktop"&gt;
  &lt;div id="content"&gt;
    &lt;form method="post" name="form_name" id="id_form"&gt;
      &lt;input type="email" name="name_email" id="id_email"&gt;
      &lt;input type="hidden" name="hidden_input" value="submit_sub"&gt;
      &lt;a href="#" id="btnSub"&gt;SAVE&lt;/a&gt;
    &lt;/form&gt;
  &lt;/div&gt;
&lt;/div&gt;


&lt;div id="mobile"&gt;
  &lt;div id="content"&gt;
    &lt;form method="post" name="form_name" id="id_form"&gt;
      &lt;input type="email" name="name_email" id="id_email"&gt;
      &lt;input type="hidden" name="hidden_input" value="submit_sub"&gt;
      &lt;a href="#" id="btnSub"&gt;SAVE&lt;/a&gt;
    &lt;/form&gt;
  &lt;/div&gt;
&lt;/div&gt;

//some JQ code
    $("#btnSub").click(function(e) {
        e.preventDefault();
        if ($("#id_email").val() == "") {}
    });

//some PHP code
  if (isset($_POST["hidden_input"]) == "submit_sub") {}
</code></pre>

<p>The above code looks the same for both desktop and mobile but in real all the elements are in different set up for mobile and desktop. My question is: can I use the same naming for IDs, NAMEs, or should I separate even if there are visible one at a time? If no do I have to change everywhere like different IDs or change for class, where I can leave the same naming? <strong>The best would be to rewrite the above example with the correct naming.</strong> </p>

<p>The reason I'm writing this question is that I've already written some code and have trouble to run it correctly, I don't know if I should change everything or the are some few things that should be only different. So, I'd like to know the main rules.</p>