title: how to auto detect the current form element with same class name
body: <p>Iam appending a form from desktop view and adding it to mobile view (including scripts) using  <code>append()</code> . Since Iam appending same class name and ID for form elements., on submitting form., it is identifying the mobile layout form and passing empty value on trying to get value using <code>document.getElementsByClassName('txtbox').value</code>. </p>
  
  <p>As per my requirement., I need to give index to identify each form while appending. like <code>document.getElementsByClassName('txtbox')[0].value</code>. I have done an approach for same. But not getting how to increment index value on appneding. I have created <a href="https://plnkr.co/edit/k519dZwxciKJDV0SWBoH?p=preview" rel="nofollow noreferrer">plunker</a> for same. Please let me know what I have missed.</p>
  
  <p>Here is the sample code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
      var data = $(".div1").html();
      $(".div2").append(data);
      $("form").submit(function(){
        
        console.log(document.getElementsByClassName('txtbox').value);
        /*console.log(document.getElementsByClassName('txtbox')[0].value);
        console.log(document.getElementsByClassName('txtbox')[1].value) ; */
      });
    });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
         &lt;script src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
   
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div class="div1"&gt;
        // data to be copied
        &lt;form class="search-container" onsubmit="event.preventDefault();window.open(abc/cde/+'?q='+document.getElementsByClassName('txtbox').value),'_self');"&gt;
           &lt;input type="text" class="txtbox" id="txtbox" placeholder="enter here..."&gt;
        &lt;input type="submit" name="submit" /&gt;&lt;/form&gt;
      &lt;/div&gt;
      
      &lt;div class="div2"&gt;
        //data to be appended
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>