JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#menu1"></a>

    </li>
    <li><a data-toggle="tab" href="#menu2"></a>

    </li>
    <button href="#" class="btn btn-default btn-sm" role="button" id="btninfo"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>

    </button>
</ul>
<table border="0" style="width: 100%; font-size:13px; margin-left: 30px">
    <tbody>
        <tr>
            <th style="width:30%">Birthday:</th>
            <td style="width:100%" contenteditable="false">
                <label></label>
            </td>
        </tr>
        <tr>
            <th>Middle Name:</th>
            <td contenteditable="false">
                <label></label>
            </td>
        </tr>
        <tr>
            <th>Course:</th>
            <td contenteditable="false">
                <label></label>
            </td>
        </tr>
        <tr>
            <th>Status:</th>
            <td contenteditable="false">
                <label></label>
            </td>
        </tr>
    </tbody>
</table>

CSS

[contenteditable="true"] {
    border-style: solid;
    border-width: 2px;
    background-color: #fff;
}

JavaScript

$('.glyphicon-pencil').closest('button').click(function () {
    if ($('td').attr('contenteditable') === 'false') {
        $('td').attr('contenteditable', true);
    } else {
        $('td').attr('contenteditable', false);
    }

});