<br><br>                         
                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-body">

                                        <h4 class="header-title">Configuration</h4>
                                        <p class="text-muted font-13 mb-4">
                                           
                                        </p>

                                        <table id="btn-editable" class="table table-centered mb-0" >
                                            <thead>
                                                <tr>
                                                    <th style="width: 40%;">Pack Name</th>
                                                    <th style="width: 40%;">Days</th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            <?php foreach ($rule_data as $row)
                                                { ?>
                                                <tr>
                                                        <td class="editableColumns"><?php echo $row['rule_name'];?></td>
                                                        <td style="max-width:35px;" class="editableColumns_1"><?php echo $row['value'];?> ( <?php echo $row['label'];?> )</td>
                                                        <td><button type="button" id="<?php echo $row['id'];?>" class="tabledit-edit-button btn btn-success" style="float: none;background-color: #00b4d5;"><span class="mdi mdi-pencil"></span></button></td>
                                                </tr>    
                                                <?php } ?>
                                  
                                            </tbody>
                                        </table>
                                        
                                    </div> <!-- end card body-->
                                </div> <!-- end card -->
                            </div><!-- end col-->
                        </div>
                        <!-- end row-->
<script>
var num = 1;
$(".tabledit-edit-button").click(function(){
    id = $(this).attr("id");
 if (num == 1) 
 {
    num = 2;
    $(`#${id}`).html('<span class="mdi mdi-pencil-plus"></span>');
  $(this).closest('tr').find('td.editableColumns').each(function(index) {
    var html = $(this).html();
    var input = $('<input class="form-control" id="'+index+'" type="text" />');
    input.val(html);
    $(this).html(input);
   });

   $(this).closest('tr').find('td.editableColumns_1').each(function(index) {
    var html = $(this).html();
    var input = $('<input class="form-control" id="_'+index+'" type="text" />');
    input.val(html.substring(0, html.indexOf(' ') + ''.length));
    $(this).html(input);
   });

 } 
 else 
 {
    $.ajax({
       type:"post",
       url: "<?php echo base_url(); ?>/rule",
       data:{ id : id , rule_name:$('#0').val() , value : $('#_0').val()},
       success:function(response)
       {
           if (response == true) 
           {
            window.location.reload();
           }
       }
    }); 
 }


});
</script>