Showing The Count Of My User And Display It On Badge. (Codeigniter)

Newbie here. I did an ajax to count the users and display it on my badge, however, whenever I'm clicking on 1 button (Modal with table), it is displaying on all badges. For example

Solution 1:

As you have use .navbar-badge this will target all elements which has that class that's the reason its changing all span tags. Instead , as you are already getting data-id of button you can use this to target only required span using $("span[data-id=" + view_id + "]").text("sometext") .

Demo code :

$(document).ready(function() {
  $(".allTable").on("click", function() {
    var view_id = $(this).data('id')

    /*$.ajax({
//somecodes of ajx ..
      */
    // $("span[data-id="+view_id+"]").text(Object.keys(item).length);
    $("span[data-id=" + view_id + "]").text(10);
    // other codes ..
    /*  }
    });*/
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">

<table class="table">
  <thead class="">
    <tr>
      <th scope="col"><i class="fas fa-hashtag"></i></th>
      <th scope="col"><i class="fas fa-mobile-alt mr-2"></i>UUID</th>
      <th scope="col">Full Name</th>
      <th scope="col"><i class="fas fa-envelope-open-text mr-2"></i>Email</th>
      <th scope="col"><i class="fas fa-phone-alt mr-2"></i>Contact Number</th>
      <th scope="col"><i class="fas fa-at mr-2"></i>Username</th>
      <th scope="col">Level</th>
      <th scope="col">balance</th>
      <th scope="col">&emsp;&emsp;&nbsp;Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>
        1
      </th>
      <td>
        123
      </td>
      <td>
        abc
      </td>
      <td>
        a@gmail.com
      </td>
      <td>
        12213
      </td>

      <td>

        <button data-id="1" class=" fundTable btn btn-success btn-sm text-bold " type="button" data-toggle="modal" data-target="#fundModal">
                                            <i class="fas fa-hand-holding-usd mr-1"></i> FUND
                                        </button>


        <button data-id="1" class=" allTable btn btn-danger btn-sm text-bold" type="button" data-toggle="modal" data-target="#editModal">
                                            &nbsp;&nbsp;&nbsp;<i class="fas fa-users"></i>
                                            <span data-id="1" class="badge badge-warning navbar-badge"></span>
                                            
                                        </button>

      </td>
    </tr>
    <tr>
      <th>
        2
      </th>
      <td>
        1232
      </td>
      <td>
        abc2
      </td>
      <td>
        a2@gmail.com
      </td>
      <td>
        12213
      </td>

      <td>

        <button data-id="2" class=" fundTable btn btn-success btn-sm text-bold " type="button" data-toggle="modal" data-target="#fundModal">
                                            <i class="fas fa-hand-holding-usd mr-2"></i> FUND
                                        </button>


        <button data-id="2" class=" allTable btn btn-danger btn-sm text-bold" type="button" data-toggle="modal" data-target="#editModal">
                                            &nbsp;&nbsp;&nbsp;<i class="fas fa-users"></i>
                                            <span data-id="2" class="badge badge-warning navbar-badge"></span>
                                            
                                        </button>

      </td>
    </tr>

  </tbody>
</table>