Q:

Jquery - Toggle Input text after checkbox

I have this code which works perfectly, It can toggle an input when checkbox is checked.
https://jsfiddle.net/majmo6r4/
But, if one day I want to add more checkboxes, I have to duplicate my code and that's not what I want. I want to improve my code in order to have the same feature with each checkboxes without create another class and duplicate my if statement and variables on my js file.
I had an idea like this :
(function($){
function $test() {
    let $cbs = $(".cbTeam");
    $cbs.each(function () {
        let $inputs = $('.inputTeam');
        if($cbs.siblings().is(':checked')) {
            $inputs.css("display", "flex");
        } else {
            $inputs.css("display", "none");
        }
    });
}
$(this).click($test);
}(jQuery));

For each checkboxes, I can toggle his input, so I need to consider that the checkboxes has the same class name and for the inputs too.
<div class="form-group">
            <label>Jeux - Préférences</label>
                    <div class="checkbox">
                        <label><input type="checkbox" class="cbTeam" value="">Hearthstone</label>
                        <input type="text" class="form-control inputTeam" placeholder="Equipe Hearthstone">
                    </div>
                    <div class="checkbox">
                        <label><input type="checkbox" class="cbTeam" value="">League of Legends</label>
                        <input type="text" class="form-control inputTeam" placeholder="Equipe LoL">
                    </div>
            <button type="submit" class="btn btn-default">S'inscrire</button>
        </div>

Thank you for taking time to my problem, I hope there's enough informations and have a nice day full of code :)
P.S. I want to say "Hello" at the start of the topic but it disappear when i publish the message :(

A:

You can show/hide the input text by using $(this).parent().next()
$(this) - will return to the current checkbox being clicked.
$(this).parent() - will return the parent of the checkbox. Which is <label> based on your html code.
$(this).parent().next() - will return the next element of the parent which is input text.
Basically, you are trying to locate the input text (one step at a time) and do some actions on it.
Since you already locate the right element(text input), you can now do actions like show() or hide(). Example: $(this).parent().next().hide()

The text input is the next element of the checkbox's parent.

$(document).ready(function() {
  $(".checkbox input[type=checkbox]").click(function() {
    if ($(this).is(":checked")) $(this).parent().next().show();
    else $(this).parent().next().hide();
  });

  //Hide inputs initially
  $(".checkbox input[type=text]").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label>Jeux - Préférences</label>
  <div class="checkbox">
    <label>
      <input type="checkbox" class="cbHs" value="">Hearthstone
  </label>
    <input type="text" class="form-control teamHs" placeholder="Equipe Hearthstone">
  </div>
  <div class="checkbox">
    <label>
       <input type="checkbox" class="cbTeam" value="">League of Legends
  </label>
    <input type="text" class="form-control inputTeam" placeholder="Equipe LoL">
  </div>
  <button type="submit" class="btn btn-default">S'inscrire</button>
</div>

