Checkbox Show/Hide Hidden With Multiple Fields

<form action="#" method="POST">
  <div> Checkbox 1:
    <input type="checkbox" id="checkbox_one" name="Checkbox1" data-trigger="hidden_checkbox_one" class="trigger">
  </div>  <div id="hidden_checkbox_one" class="hidden"> This is hidden one:
    <input type="text" id="hidden_one" name="hidden">
  </div>
  <div> Checkbox 2:
    <input type="checkbox" id="checkbox_two" name="Checkbox2" data-trigger="hidden_checkbox_two" class="trigger">
  </div>
  <div id="hidden_checkbox_two" class="hidden"> This is hidden two:
    <input type="text" id="hidden_two" name="hidden">
  </div>
  <div> Checkbox 3:
    <input type="checkbox" id="checkbox_three" name="Checkbox3" data-trigger="hidden_checkbox_three" class="trigger">
  </div>
  <div id="hidden_checkbox_three" class="hidden"> This is hidden three:
    <input type="text" id="hidden_three" name="hidden">
  </div>
  <div> Checkbox 4:
    <input type="checkbox" id="checkbox_four" name="Checkbox4" data-trigger="hidden_checkbox_four" class="trigger">
  </div>
  <div id="hidden_checkbox_four" class="hidden"> This is hidden four:
    <input type="text" id="hidden_four" name="hidden">
  </div>
</form>

<script>
jQuery(function() {
  jQuery('.hidden').hide();
  jQuery('.trigger').change(function() { 
    var hiddenId = jQuery(this).attr("data-trigger");
    if (jQuery(this).is(':checked')) {
      jQuery("#" + hiddenId).show();
    } else {
      jQuery("#" + hiddenId).hide();
    }
  });
});
</script>

-------------------------------------------------
Let me know your thoughts and questions in the comments.
Email: vyasankit2008@gmail.com