I'm working on an app with six similar sections on the homepage. 
I have the app working but I had to repeat the block of code below:

The only thing different on each instance is id: `#grid` and id: `#close` as 
this ids vary on each of the six sections. 

I try to clean this up by having line:

```
var $grid = $( '#grid4', '#grid2', '#grid3' ..... ),

```

and 

```
$close = $( '#close', '#close2', '#close3', .....),

```

The previous prevents sections from loading on browser.

Here is the block of code that is being repeated: 

```
$(function() {

    var $grid = $( '#grid' ),
      $name = $( '.name' ),
      $close = $( '#close' ),
      $loader = $( '<div class="loader"><i></i><i></i><i></i><i></i><i></i><i></i><span>Loading...</span></div>' ).insertBefore( $grid ),
      stapel = $grid.stapel( {
        onLoad : function() {
          $loader.remove();
        },
        onBeforeOpen : function( pileName ) {
          $name.html( pileName );
        },
        onAfterOpen : function( pileName ) {
          $close.show();
        }
      } );

    $close.on( 'click', function() {
      $close.hide();
      $name.empty();
      stapel.closePile();
    } );

} );

```

How can I improve the code so I don't have to repeat the previous block? (keeping in mind that I do need to keep different ids as I need each section to behave independently)