title: How to insert value into a html table row by row from a popup modal using jQuery
body: <p>I have a textbox for user input and after submit the textbox does not show the result. The textbox only show the result if I click on the textbox again. It means every time I type, the textbox shows null. After I click again the submit button, it only shows again the result.</p>
  
  <p>But what I want is when I finished filled up the information, the information will automatically appear when I click the "Next"button.</p>
  
  <p>Here I provide my code in jsfiddle:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> $('.contactSelectDiv').off('click').click(function () {
      
     $('#contactInfoModel').openModal();
  
          })
  
    $('#btnNextContactInfoModel').click(function () {
  $("body").find('input[name="email"]').val($('#contacttype').val()+ " " + " " + $('#contact').val());
     
     $('#contactInfoModel').closeModal();
  
  
     })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table class="striped"&gt;
       &lt;h5&gt;Contact&lt;/h5&gt;
               &lt;thead&gt;
                 &lt;tr&gt;
           &lt;th&gt;  &lt;/th&gt;
           &lt;th&gt;Type&lt;/th&gt;
           &lt;th&gt;Contact Info&lt;/th&gt;
                 &lt;/tr&gt;
               &lt;/thead&gt;
  
               &lt;tbody&gt;
               &lt;tr&gt;
          &lt;td&gt;1.&lt;/td&gt;
                   &lt;td&gt;Email 1&lt;/td&gt;
          &lt;td&gt;
           &lt;div class="input-field col s12 m20 l20 contactSelectDiv"&gt;
            &lt;div class="input-wrapper"&gt;
            &lt;/div&gt;
             &lt;input id="email1" name="email" type="text" readonly&gt;
             
           &lt;/div&gt;
          &lt;/td&gt;
                 &lt;/tr&gt;
                &lt;tr&gt;
          &lt;td&gt;2.&lt;/td&gt;
          &lt;td&gt;Email 2&lt;/td&gt;
          &lt;td&gt;&lt;div class="input-field col s12 m20 l20 contactSelectDiv"&gt;
            &lt;div class="input-wrapper"&gt;
            &lt;/div&gt;
             &lt;input id="email2" name="email" type="text" readonly&gt;
             
           &lt;/div&gt;&lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr&gt;
          &lt;td&gt;3.&lt;/td&gt;
          &lt;td&gt;Email 3&lt;/td&gt;
          &lt;td&gt;&lt;div class="input-field col s12 m20 l20 contactSelectDiv"&gt;
            &lt;div class="input-wrapper"&gt;
            &lt;/div&gt;
             &lt;input id="email3" name="email" type="text" readonly&gt;
          
           &lt;/div&gt;&lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr&gt;
          &lt;td&gt;4.&lt;/td&gt;
          &lt;td&gt;Handphone 1&lt;/td&gt;
          &lt;td&gt;&lt;div class="input-field col s12 m20 l20 contactSelectDiv"&gt;
            &lt;div class="input-wrapper"&gt;
            &lt;/div&gt;
             &lt;input id="handphone1" name="handphone" type="text" readonly&gt;
             
           &lt;/div&gt;&lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr&gt;
          &lt;td&gt;5.&lt;/td&gt;
          &lt;td&gt;Handphone 2&lt;/td&gt;
          &lt;td&gt;&lt;div class="input-field col s12 m20 l20 contactSelectDiv"&gt;
            &lt;div class="input-wrapper"&gt;
            &lt;/div&gt;
             &lt;input id="handphone2" name="handphone" type="text" readonly&gt;
         
           &lt;/div&gt;&lt;/td&gt;
         &lt;/tr&gt;
             &lt;/tbody&gt;
           &lt;/table&gt;
  
  &lt;div id="contactInfoModel" class="modal modal-fixed-footer" style="max-height:100%;height:80%;width:60%;margin-left:20%;"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="bread-crumbs-header"&gt;
              &lt;div class="bread-crumbs-section"&gt;
                  &lt;!--&lt;i class="header-icon small mdi-image-hdr-weak"&gt;&lt;/i&gt;--&gt;
                  &lt;div class="header truncate modal-header"&gt;
                      &lt;span data-i18n="personal-particular-update.msg_lookup_contact_info"&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
                 &lt;div class="input-field col s12 m3 l3"&gt;
       &lt;select id=contacttype&gt;
        &lt;option value="" disabled selected&gt;Please select&lt;/option&gt;
        &lt;option value="1"&gt;Type 1&lt;/option&gt;
                          &lt;option value="2"&gt;Type 2&lt;/option&gt;
                          &lt;option value="3"&gt;Type 3&lt;/option&gt;
       &lt;/select&gt;
       &lt;label data-i18n="personal-particular-update.msg_type"&gt;&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="col s12 m3 l3"&gt;
        &lt;td&gt;Contact Info&lt;/td&gt;
        &lt;div id="Contact Info" &gt;
         &lt;input id="contact" name="contacts" type="text"&gt;
         &lt;/div&gt;
           &lt;/div&gt;
              &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;button id="btnNextContactInfoModel" class="btn-large btn-form-2 btn-floating waves-effect waves-light blue darken-2 right" type="button"&gt;
              &lt;i class="mdi-navigation-check"&gt;&lt;/i&gt;
              &lt;span&gt;Next&lt;/span&gt;
          &lt;/button&gt;
    &lt;button id="btnCloseContactInfoModel" class="btn-large btn-form-2 btn-floating waves-effect waves-light red darken-2 left" type="button"&gt;
     &lt;i class="mdi-navigation-close"&gt;&lt;/i&gt;
     &lt;span &gt;cancel&lt;/span&gt;
    &lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And I provide explanation of my problem in figure, too.</p>
  
  <p><a href="http://i.stack.imgur.com/pFaNx.jpg" rel="nofollow">Problem Explanation in Figure</a> </p>