Display Table Cell Values to Input Text Fields

Let's say table rows are populated with information and you want the "input text" to be filled with those info. Here's how:

Sample HTML code for table:

<table id="viewOwnersInfo" class="table table-hover" border="1">
    <tbody>
        <tr>
            <th>Last Name</th>
            <th>First Name</th>
            <th>Middle Name</th>
            <th>Address</th>
            <th>Contact No.</th>
            <th>Tin</th>
        </tr>
        <tr>
            <td>Bonotan</td>
            <td>Melbert</td>
            <td>Recto</td>
            <td>P3A Ampayon, Butuan City</td>
            <td>09488588371</td>
            <td>TIN-2392399-23293</td>
        </tr>
        <tr>
            <td>Morales</td>
            <td>Edsel Matt</td>
            <td>Otacan</td>
            <td>Km. 3 Baan 3</td>
            <td>09078648310</td>
            <td>TIN-123123-1123123</td>
        </tr>
        <tr>
            <td>Rante</td>
            <td>Jorick</td>
            <td>Guinares</td>
            <td>Ampayon Butuan City</td>
            <td>09463829484</td>
            <td>TIN-3129812</td>
        </tr>
    </tbody>
</table>
<br/>
<!--Owner-->
<div class="form-group">
    <div class="col-md-12">
        <label for="owner">Owner</label>
        <input class="form-control" type="text" name="owner" id="owner" placeholder="Owner" data-toggle="modal" data-target="#owner_modal" />
    </div>
</div>
<!--Owner Address-->
<div class="form-group">
    <div class="col-md-6">
        <label for="owneraddress">Address</label>
        <input class="form-control" type="text" name="owneraddress" id="owneraddress" placeholder="Owner Address" />
    </div>
</div>
<!--Owner Contact Number-->
<div class="form-group">
    <div class="col-md-6">
        <label for="ownercontact">Contact Number</label>
        <input class="form-control" type="text" name="ownercontact" id="ownercontact" placeholder="Contact Number" />
    </div>
</div>
<!--TIN-->
<div class="form-group">
    <div class="col-md-6">
        <label for="tdno">TIN</label>
        <input class="form-control" type="text" name="tdno" id="tdno" placeholder="TIN" />
    </div>
</div>

Just for highlighting the table row if selected (CSS):

.selected{background-color:#017ebc;}

Jquery script, change the id's as necessary:

$('#viewOwnersInfo tr').click(function () {
    $("#viewOwnersInfo tr").removeClass("selected");
    if (!this.rowIndex) return; // skip first row
    $(this).addClass("selected");
    $(this).each(function () {
        if (!this.rowIndex) return; // skip first row
        var a1 = this.cells[0].innerHTML;
        var a2 = this.cells[1].innerHTML;
        var a3 = this.cells[2].innerHTML;
        var a4 = this.cells[3].innerHTML;
        var a5 = this.cells[4].innerHTML;
        var a6 = this.cells[5].innerHTML;
        $("#owner").val(a2 + " " + a3 + " " + a1);
        $("#ownercontact").val(a5);
        $("#owneraddress").val(a4);
        $("#tdno").val(a6);
    });
});

JSFiddle Demo