How to insert value into a html table row by row from a popup modal using jQuery

Question

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.

But what I want is when I finished filled up the information, the information will automatically appear when I click the "Next"button.

Here I provide my code in jsfiddle:

	$('.contactSelectDiv').off('click').click(function () {
				
			$('#contactInfoModel').openModal();

        })

		$('#btnNextContactInfoModel').click(function () {
$("body").find('input[name="email"]').val($('#contacttype').val()+ " " + " " + $('#contact').val());
			
			$('#contactInfoModel').closeModal();


			})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="striped">
					<h5>Contact</h5>
					        <thead>
					          <tr>
									<th>  </th>
									<th>Type</th>
									<th>Contact Info</th>
					          </tr>
					        </thead>

					        <tbody>
					        <tr>
								<td>1.</td>
					            <td>Email 1</td>
								<td>
									<div class="input-field col s12 m20 l20 contactSelectDiv">
										<div class="input-wrapper">
										</div>
											<input id="email1" name="email" type="text" readonly>
											
									</div>
								</td>
					          </tr>
					         <tr>
								<td>2.</td>
								<td>Email 2</td>
								<td><div class="input-field col s12 m20 l20 contactSelectDiv">
										<div class="input-wrapper">
										</div>
											<input id="email2" name="email" type="text" readonly>
											
									</div></td>
							</tr>
							<tr>
								<td>3.</td>
								<td>Email 3</td>
								<td><div class="input-field col s12 m20 l20 contactSelectDiv">
										<div class="input-wrapper">
										</div>
											<input id="email3" name="email" type="text" readonly>
								
									</div></td>
							</tr>
							<tr>
								<td>4.</td>
								<td>Handphone 1</td>
								<td><div class="input-field col s12 m20 l20 contactSelectDiv">
										<div class="input-wrapper">
										</div>
											<input id="handphone1" name="handphone" type="text" readonly>
											
									</div></td>
							</tr>
							<tr>
								<td>5.</td>
								<td>Handphone 2</td>
								<td><div class="input-field col s12 m20 l20 contactSelectDiv">
										<div class="input-wrapper">
										</div>
											<input id="handphone2" name="handphone" type="text" readonly>
							
									</div></td>
							</tr>
					      </tbody>
					    </table>

<div id="contactInfoModel" class="modal modal-fixed-footer" style="max-height:100%;height:80%;width:60%;margin-left:20%;">
    <div class="modal-content">
        <div class="bread-crumbs-header">
            <div class="bread-crumbs-section">
                <!--<i class="header-icon small mdi-image-hdr-weak"></i>-->
                <div class="header truncate modal-header">
                    <span data-i18n="personal-particular-update.msg_lookup_contact_info"></span>
                </div>
            </div>
        </div>
        <div class="row">
               <div class="input-field col s12 m3 l3">
					<select id=contacttype>
						<option value="" disabled selected>Please select</option>
						<option value="1">Type 1</option>
                        <option value="2">Type 2</option>
                        <option value="3">Type 3</option>
					</select>
					<label data-i18n="personal-particular-update.msg_type"></label>
				</div>
				<div class="col s12 m3 l3">
						<td>Contact Info</td>
						<div id="Contact Info" >
							<input id="contact" name="contacts" type="text">
					  </div>
			      </div>
            </div>
    </div>
    <div class="modal-footer">
        <button id="btnNextContactInfoModel" class="btn-large btn-form-2 btn-floating waves-effect waves-light blue darken-2 right" type="button">
            <i class="mdi-navigation-check"></i>
            <span>Next</span>
        </button>
		<button id="btnCloseContactInfoModel" class="btn-large btn-form-2 btn-floating waves-effect waves-light red darken-2 left" type="button">
			<i class="mdi-navigation-close"></i>
			<span >cancel</span>
		</button>
    </div>
</div>

And I provide explanation of my problem in figure, too.

Problem Explanation in Figure

Answer 1

Edited Answer

Here is your jquery code

$('.contactSelectDiv').off('click').click(function () {

    $("#storeType").val($(this).children("input").attr('id'));
    $('#contactInfoModel').openModal();
});

$('#btnNextContactInfoModel').click(function () {

    $("#contactInfoModel").closeModal();            
    $("#" + $("#storeType").val()).val($("#contact").val());
});

I've added one hidden filed inside your modal div, which will keep the id of an element to insert the value.

<div id="contactInfoModel" class="modal modal-fixed-footer" style="max-height:100%;height:80%;width:60%;margin-left:20%;">
    <div class="modal-content">
        <div class="bread-crumbs-header">
            <div class="bread-crumbs-section">
                <!--<i class="header-icon small mdi-image-hdr-weak"></i>-->
                <div class="header truncate modal-header">
                    <span data-i18n="personal-particular-update.msg_lookup_contact_info"></span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s12 m3 l3">
                <select id=contacttype>
                    <option value="" disabled selected>Please select</option>
                    <option value="1">Type 1</option>
                    <option value="2">Type 2</option>
                    <option value="3">Type 3</option>
                </select>
                <label data-i18n="personal-particular-update.msg_type"></label>
            </div>
            <div class="col s12 m3 l3">
                <td>Contact Info</td>
                <div id="Contact Info" >
                    <input id="contact" name="contacts" type="text">
                </div>
            </div>
            <input type="hidden" id="storeType" />
        </div>
    </div>
    <div class="modal-footer">
        <button id="btnNextContactInfoModel" class="btn-large btn-form-2 btn-floating waves-effect waves-light blue darken-2 right" type="button">
            <i class="mdi-navigation-check"></i>
            <span>Next</span>
        </button>
        <button id="btnCloseContactInfoModel" class="btn-large btn-form-2 btn-floating waves-effect waves-light red darken-2 left" type="button">
            <i class="mdi-navigation-close"></i>
            <span >cancel</span>
        </button>
    </div>
</div>