my page [here](http://test.usfamilyguide.com/test4/orderformpage3.php) has multiple checkboxes, each with its own textarea below. On page load, the textareas are hidden. Clicking a checkbox `toggle`s the text area, which then displays a character counter beneath.

This is working just as i need, for all the pairs of checkbox/ textarea. My problem is that in the interest of time and *showing* the client the functionality, i repeated the jQuery code for every single pair. I know there is a way to use `each` or one of its methods to use the same code for all the pairs, but i struggled making it work.

In the HTML, i did my best to use ID's and classes for all the checkboxes, textareas, wrappers for both, wrappers for each entire section, with the intention of being able to use jQuery and / or JS selectors to select anything.

If this question is not phrased well, please help me improve (i think *this* one is, but StackOverflow is giving me the warning at the top of the page about danger of being blocked.)

I will only paste in three pieces of the code that is repeated.

So, how can i not repeat the code and have the exact same functionality as i do now? I think this will use `each` and maybe changing what selectors re used, but i need help doing it!

The code snippet:

```js

/*
     * orderformpage3.php text area show hide and character count  
     * this code needs to use an each method to iterate instead of repeat. For now, it is repeating.
     */
    $(document).ready(function() {

          /*
           * for birthday parties
           */
          // toggle visibility of text area on checkbox click
          $("#birthdayParties").click(function() {
            // $("#birthdayPartiesInput").toggleClass("show");
            $("#birthdayPartiesWrap").toggle(500);
          });

          // Character counter
          $("#birthdayPartiesInput").on('keyup', function(e) {
            var counter, textEntered, countRemaining;
            // get the number of characters in the box
            textEntered = $("#birthdayPartiesInput").val();
            // number left = number of characters - our maximum
            var counter = (500 - (textEntered.length));
            // access the div for characters remaining
            countRemaining = $("#charactersRemainingBirthday");
            // put the number of characters left into that div
            countRemaining.text(counter + ' characters remnaining');
          });

          /*
           * for fun activities
           */
          // toggle visibility of text area on checkbox click
          $("#funActivities").click(function() {
            // $("#birthdayPartiesInput").toggleClass("show");
            $("#funActivitiesWrap").toggle(500);
          });

          // Character counter
          $("#funActivitiesInput").on('keyup', function(e) {
            var counter, textEntered, countRemaining;
            // get the number of characters in the box
            textEntered = $("#funActivitiesInput").val();
            // number left = number of characters - our maximum
            var counter = (500 - (textEntered.length));
            // access the div for characters remaining
            countRemaining = $("#charactersRemainingFunActivities");
            // put the number of characters left into that div
            countRemaining.text(counter + ' characters remnaining');
          });

          /*
           * for Summer Camps
           */
          // toggle visibility of text area on checkbox click
          $("#summerCamps").click(function() {
            // $("#birthdayPartiesInput").toggleClass("show");
            $("#summerCampsWrap").toggle(500);
          });

          // Character counter
          $("#summerCampsInput").on('keyup', function(e) {
            var counter, textEntered, countRemaining;
            // get the number of characters in the box
            textEntered = $("#summerCampsInput").val();
            // number left = number of characters - our maximum
            var counter = (500 - (textEntered.length));
            // access the div for characters remaining
            countRemaining = $("#charactersRemainingSummerCamps");
            // put the number of characters left into that div
            countRemaining.text(counter + ' characters remnaining');
          });
       });
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
    <div class="category-row">
      <div class="form-group row align-items-center">
        <div class="col-xs-1 ml-3">
          <input type="checkbox" name="birthdayparties" class="col-form-label form-control category-checkbox" id="birthdayParties" />
        </div>
        <label for="birthdayParties" class="col-xs-3 ml-2 col-form-label">Birthday Parties</label>
        <div class="col-sm-12 description-wrap hide" id="birthdayPartiesWrap">
          <textarea name="birthdaypartiesdescription" type="text" class="form-control col-form-label category-text" id="birthdayPartiesInput">Lorem Ipsum</textarea>
          <div class="charactersRemaining" id="charactersRemainingBirthday">500 characters remnaining</div>
        </div>
      </div>
    </div>

   <div class="category-row">
          <div class="form-group row align-items-center">
            <div class="col-xs-1 ml-3">
            <?php if ($birthdayparties == true) {$birthdaypartieschecked = 'checked';} else { $birthdaypartieschecked = '';}?>

             <input type="checkbox" name="birthdayparties" class="col-form-label form-control category-checkbox" id="birthdayParties" <?php echo $birthdaypartieschecked; ?>/>
           </div>
            <label for="birthdayParties" class="col-xs-3 ml-2 col-form-label">Birthday Parties</label>
            <div class="col-sm-12 description-wrap hide" id="birthdayPartiesWrap" >
              <textarea name="birthdaypartiesdescription" type="text" class="form-control col-form-label category-text" id="birthdayPartiesInput"><?php echo $_SESSION['birthdaypartiesdescription']; ?></textarea>
              <div class="charactersRemaining" id="charactersRemainingBirthday">500 characters remnaining</div>
            </div>
          </div>
        </div>

        <div class="category-row">
          <div class="form-group row align-items-center">
           <div class="col-xs-1 ml-3">
           <?php if ($funactivities == true) {$funactivitieschecked = 'checked';} else { $funactivitieschecked = '';}?>
             <input type="checkbox" name="funactivities" class="col-form-label form-control category-checkbox" id="funActivities" <?php echo $funactivitieschecked; ?>/>
           </div>
            <label for="funActivities" class="col-xs-3 ml-2 col-form-label">Fun Activities</label>
            <div class="col-sm-12 description-wrap hide" id="funActivitiesWrap">
              <textarea name="funactivitiesdescription" type="text" class="form-control col-form-label category-text" id="funActivitiesInput"><?php echo $_SESSION['sessfunactivitiesdescription']; ?></textarea>
              <div class="charactersRemaining" id="charactersRemainingFunActivities">500 characters remnaining</div>
            </div>
          </div>
        </div>

        <div class="category-row">
          <div class="form-group row align-items-center">
           <div class="col-xs-1 ml-3">
           <?php if ($summercamps == true) {
    $summercampschecked = 'checked';
    echo '<script>';
    echo '$("#summerCampsWrap").toggle(100);';
    echo '</script>';
} else {
    $summercampschecked = '';
    echo '<script>';
    echo '$("#summerCampsWrap").toggle(100);';
    echo '</script>';
}
?>

  <input type="checkbox" name="summercamps" class="col-form-label
form-control category-checkbox" id="summerCamps" <?php echo
    $summercampschecked; ?>/>
           </div>
            <label for="summerCamps" class="col-xs-3 ml-2 col-form-label">Summer Camps</label>
            <div class="col-sm-12 description-wrap hide" id="summerCampsWrap">
              <textarea name="summercampsdescription" type="text"  class="form-control col-form-label category-text" id="summerCampsInput"><?php echo $_SESSION['sesssummercampsdescription']; ?></textarea>
              <div class="charactersRemaining" id="charactersRemainingSummerCamps">500 characters remnaining</div>
            </div>
          </div>
        </div>
```