Editing toggle function with classes

[Muiter1]

I am using X-editble in Bootstrap 3.

When I use button to be able to edit files I see all editable fields open shortly, this problem 1.

After that the function works OK, but when I want to turn if off the fields are still editable (see dotted lines), this problem 2.

See this small video of the problem

How to prevent this?

<input id="toggle-event" type="checkbox" data-toggle="toggle" data-size="mini" data-on="<span class='glyphicon glyphicon-pencil'></span>" data-off="<span class='glyphicon glyphicon-pencil'></span>" data-onstyle="danger">

  <tr>
    <td style="width:30px"><span class="fas fa-user" aria-hidden="true"></span></td>
    <td><span class="editable_textfield" data-type="text" data-name="users|naam|1" data-pk="<?php echo $_SESSION['user_id']; ?>" data-url="processing/inline_editing.php"><?php echo $row['naam']; ?></span></td>
  </tr>
  <tr>
    <td style="width:30px"><span class="fas fa-envelope" aria-hidden="true"></span></td>
    <td><span class="editable_textfield" data-type="text" data-name="users|email|1" data-pk="<?php echo $_SESSION['user_id']; ?>" data-url="processing/inline_editing.php"><?php echo $row['email']; ?></span></td>
  </tr>
  <tr>
    <td style="width:30px"><span class="fas fa-phone" aria-hidden="true"></span></td>
    <td><span class="editable_textfield" data-type="text" data-name="users|tel|0|num" data-pk="<?php echo $_SESSION['user_id']; ?>" data-url="processing/inline_editing.php"><?php echo $row['tel']; ?></span></td>
  </tr>
  <tr>
    <td style="width:30px"><span class="fas fa-mobile-alt" aria-hidden="true"></span></td>
    <td><span class="editable_textfield" data-type="text" data-name="users|mob|0|num" data-pk="<?php echo $_SESSION['user_id']; ?>" data-url="processing/inline_editing.php"><?php echo $row['mob']; ?></span></td>
  </tr>

$(document).ready(function(){
    $('#toggle-event').change(function(e) {
    e.stopPropagation();
    $('.editable_textfield').editable('toggle');
    });
});