Question: I wanted to make it as a loop for this ready function but I ended up doing like this: 

```
$(document).ready(function () {

  $('#p1-show').click(function () { $('#p1').show(); });
  $('#p1-hide').click(function () { $('#p1').hide(); });

  $('#p2-show').click(function () { $('#p2').show(); });
  $('#p2-hide').click(function () { $('#p2').hide(); });

  $('#p3-show').click(function () { $('#p3').show(); });
  $('#p3-hide').click(function () { $('#p3').hide(); });

  $('#p4-show').click(function () { $('#p4').show(); });
  $('#p4-hide').click(function () { $('#p4').hide(); });

  //there will be ids' for 300+ show hide

});

```

Answer: 
You can associate the element to be `show()` and `hide()` using custom `data-*` prefixed attribute, which can be retried using `.data(key)`.

Using it you can use Class Selector to bind event handler.

*HTML*

```
 <button class="show" data-target="#p1">show p1<button>
 <button class="hide" data-target="#p1">hide p1<button>

```

*Script*

```
$(document).ready(function () {
    $('.show').click(function () {
        $(this).data('target').show();
    });
    $('.hide').click(function () {
        $(this).data('target').hide();
    });
})

```
try with this for loop it will help you

```js
$(document).ready(function() {

  for (var i = 0; i <= 300; i++) {
    $('#p' + i + '-show').click(function() {
      $('#p' + i).show();
    });
    $('#p' + i + '-hide').click(function() {
      $('#p' + i).hide();
    });
  }
  /* $('#p1-show').click(function () { $('#p1').show(); });
   $('#p1-hide').click(function () { $('#p1').hide(); });

   $('#p2-show').click(function () { $('#p2').show(); });
   $('#p2-hide').click(function () { $('#p2').hide(); });

   $('#p3-show').click(function () { $('#p3').show(); });
   $('#p3-hide').click(function () { $('#p3').hide(); });

   $('#p4-show').click(function () { $('#p4').show(); });
   $('#p4-hide').click(function () { $('#p4').hide(); });

   //there will be ids' for 300+*/

});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
```