JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link rel="stylesheet" href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css">
<p id="activeFlag_@user1">True</p>
<div class="checkbox">
  <label>
    <input id="activeToggle_user1" type="checkbox" data-toggle="toggle" data-on="Enabled" data-off="Disabled">
  </label>
</div>
    
<p id="activeFlag_@user2">False</p>
<div class="checkbox">
  <label>
    <input id="activeToggle_user2" type="checkbox" data-toggle="toggle" data-on="Enabled" data-off="Disabled">
  </label>
</div>

<p id="activeFlag_@user3">False</p>
<div class="checkbox">
  <label>
    <input id="activeToggle_user3" type="checkbox" data-toggle="toggle" data-on="Enabled" data-off="Disabled">
  </label>
</div>

CSS

body{
  margin: 50px;
}

JavaScript

$(document).ready(function () {
  var flags = [];
  var userID = '',
      toggleSlider = '';

  flags = document.querySelectorAll('*[id^="activeFlag_"]');

  flags.forEach(function (flag) {
    userID = flag.id.split('_@')[1];
  
    // This is where i search for the hidden text
    if (flag.firstChild.data == 'True') {
      // Nothing works here.
      $('#activeToggle_' + userID).bootstrapToggle('toggle');
    }
  });
});