Making HTML elements editable after a click of a button and save on the database

Question

I've researched about this for a while now but I haven't really gotten my head wrapped around it as an amateur in design. How do make my following markup editable after after the user clicks on the 'Edit' button I had created. So here it is:

<div class='wrapper'>
    <div class='topinfobar'>
    <p>Contact Info</p>
    </div>
    <table>
    <tbody>
    <tr><td><p class='leftspacing'>Cellphone Numbers</p></td><td><p>072 215 3372</p></td>
    <tr><td><p class='leftspacing'>Phone Numbers</p></td><td><p>011 310 9967</p></td>
    <tr><td><p class='leftspacing'>email address</p></td><td><p>[email protected]</p></td>
    </tbody>
    </table>
    <button>Change</button>
</div>

I wanna be able to change only the Cellphone Numbers etc. by just pressing the Edit button I had created. I'm using php, I just did that markup for design purposes. And I want the button to change from 'Change' to 'Done' while the user is still editing their details. So, the info is only readable before you click on the Edit button and it changes to 'Done' after the user had clicked it

Answer 1

You can put those values in inputs but it's look like regular content using readonly attribute and css, and just toggle class and the attribute.

$('#edit').click(function(){
  $('#form').toggleClass('view');
  $('input').each(function(){
    var inp = $(this);
    if (inp.attr('readonly')) {
     inp.removeAttr('readonly');
    }
    else {
      inp.attr('readonly', 'readonly');
    }
  });
});

.view input {
  border:0;
  background:0;
  outline:none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='topinfobar'>
        <p>Contact Info</p>
    </div>
    <table id="form" class="view">
        <tbody>
            <tr>
                <td>
                    <p class='leftspacing'>Cellphone Numbers</p>
                </td>
                <td>
                    <p><input type="text" value="072 215 3372" readonly/></p>
                </td>
            </tr>
            <tr>
                <td>
                    <p class='leftspacing'>Phone Numbers</p>
                </td>
                <td>
                    <p><input type="text" value="011 310 9967" readonly/></p>
                </td>
            </tr>
            <tr>
                <td>
                    <p class='leftspacing'>email address</p>
                </td>
                <td>
                    <p><input type="email" value="[email protected]" readonly/></p>
                </td>
            </tr>
        </tbody>
    </table>
    <button id="edit">Change</button>