Using bootstrap and jquery, I have created the table linked with the modal popup window. In the table I have two action icons 

1. Activate
2. De-Activate

Currently, on click to the **Activate icon in the table** the popup window is appearing with the value of current row along with the Activate button, my need is **OnClick** to this **Activate button in the popup window** the activate icon in the current td need to be changed as de-activate icon. Like the same need to do for De-activate icon. please help me to find out this.

below is the code.

```
<div class="table-responsive">
    <table class="table table-bordered table-striped table-hover">
        <thead>
            <tr>
                <th>Name</th>
                <th>Username</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><a href="#" data-toggle="modal" data-target="#usrdetails"><span class="lsusrfname">Jayashree</span></a></td>
                <td><span class="lsusrlname">Gopalan</span></td>
                <td align=center>
                    <a href="#" data-toggle="modal" data-target="#usract"><span class="usrin glyphicon glyphicon-ok" title="Activate"> </span></a>
                </td>

            </tr>
            <tr>
                <td><a href="#" data-toggle="modal" data-target="#usrdetails"><span class="lsusrfname">Siva</span></a></td>
                <td><span class="lsusrlname">Prasad</span></td>
                <td align=center>
                    <a href="#" data-toggle="modal" data-target="#usrdeact"><span class="usrrm glyphicon glyphicon-remove" title="De-Activate"> </span></a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

```

Model window:

```
<div class="modal fade" id="usract" role="dialog">
    <div class="modal-dialog uc-modal">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title">Activate user</h3>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-horizontal disableform">
                            <div class="form-group">
                                <!-- add "has-error" for validation-->
                                <label class="control-label col-xs-6 col-md-4">First Name</label>
                                <div class="col-xs-12 col-sm-6 col-md-8">
                                    <input type="text" class="form-control fname" placeholder="First Name">
                                    <!--<span class="help-block">You can't leave this empty.</span>-->
                                </div>
                            </div>
                            <div class="form-group">
                                <!-- add has-error for validation-->
                                <label class="control-label col-xs-6 col-md-4">Last Name</label>
                                <div class="col-xs-12 col-sm-6 col-md-8">
                                    <input type="text" class="form-control lname" placeholder="Last Name">
                                    <!--<span class="help-block">You can't leave this empty.</span>-->
                                </div>
                            </div>
                        </div>

                        <p>Are you sure want to Activate this User ? 
                            <button type="button" class="btn btn-success" id="actusr" data-dismiss="modal" >Activate</button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal">NO</button>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="usrdeact" role="dialog">
    <div class="modal-dialog uc-modal">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title">De-Activate user</h3>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-horizontal disableform">
                            <div class="form-group">
                                <!-- add "has-error" for validation-->
                                <label class="control-label col-xs-6 col-md-4">First Name</label>
                                <div class="col-xs-12 col-sm-6 col-md-8">
                                    <input type="text" class="form-control fname" placeholder="First Name">
                                    <!--<span class="help-block">You can't leave this empty.</span>-->
                                </div>
                            </div>
                            <div class="form-group">
                                <!-- add has-error for validation-->
                                <label class="control-label col-xs-6 col-md-4">Last Name</label>
                                <div class="col-xs-12 col-sm-6 col-md-8">
                                    <input type="text" class="form-control lname" placeholder="Last Name">
                                    <!--<span class="help-block">You can't leave this empty.</span>-->
                                </div>
                            </div>
                        </div>

                        <p>Are you sure want to De-Activate this User ? 
                            <button type="button" class="btn btn-success" id="de_actusr">De-Activate</button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal">NO</button>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

```

Jquery :

```
$(".usrrm, .usrin").click(function(){
    var tdusrname=$(this).parents("tr").children("td:first").text();
    $(".fname").val(tdusrname);

    var tdlname=$(this).parents("tr").children("td:nth-child(2)").text();
    $(".lname").val(tdlname);
});

$("#actusr").click(function(){ 
    $('tr td span').removeClass('usrm glyphicon glyphicon-ok');
    $('tr td span').addClass('usrin glyphicon glyphicon-remove');
});

$("#de_actusr").click(function(){ 
    $('tr td span').removeClass('usrm glyphicon glyphicon-remove');
    $('tr td span').addClass('usrin glyphicon glyphicon-ok');
});

```

please help me to find out this