Multiple instances of the same code on simplified

Multiple instances of the same code on simplified

Hi! This is my first post on here and a bit of a rookie question but I've been struggling to find help on the matter for months and all of my posts on Stack Exchange have gone ignored. I'm convinced that what I'm trying to do is fairly simple and that anybody with an intermediate knowledge of jQuery will be able to help me (my own experience is lacking).

Basically I've created a script for a modal window  which fixes the 'body' position and hijacks the browser scrollbar  exactly as I intend it to. Now all I need to do now is edit the code so that multiple instances containing different content can exist on the same web page.  This is what I am struggling with. The code is simple;

<script>
 $(document).ready(function() { 
 var body = $('body'),
    main = $('.main'),
    open_modal = $('.open-modal'),
    close_modal = $('.close-modal'),
    modal_container = $('.modal-container'),
    toggleModal = function() {
        body.toggleClass('body-locked') ;
        modal_container.toggleClass('dp-block');
    };
$(".open-modal").click(function(){
  $(".modal-container").fadeIn(1000);
});


open_modal.on('click', toggleModal);
close_modal.on('click', toggleModal);


 });
</script>

Now rather than repeating it in slightly varied instances like this;

<script>
 $(document).ready(function() { 
 var body = $('body'),
    main = $('.main'),
    open_modal = $('.open-modal_1'),
    close_modal = $('.close-modal_1'),
    modal_container = $('.modal-container_1'),
    toggleModal = function() {
        body.toggleClass('body-locked') ;
        modal_container.toggleClass('dp-block');
    };
$(".open-modal_1").click(function(){
  $(".modal-container_1").fadeIn(1000);
});


open_modal.on('click', toggleModal);
close_modal.on('click', toggleModal);


 });
</script>

<script>
 $(document).ready(function() { 
 var body = $('body'),
    main = $('.main'),
    open_modal = $('.open-modal_2'),
    close_modal = $('.close-modal_2'),
    modal_container = $('.modal-container_2'),
    toggleModal = function() {
        body.toggleClass('body-locked') ;
        modal_container.toggleClass('dp-block');
    };
$(".open-modal_2").click(function(){
  $(".modal-container_2").fadeIn(1000);
});


open_modal.on('click', toggleModal);
close_modal.on('click', toggleModal);


 });
</script>

<script>
 $(document).ready(function() { 
 var body = $('body'),
    main = $('.main'),
    open_modal = $('.open-modal_3'),
    close_modal = $('.close-modal_3'),
    modal_container = $('.modal-container_3'),
    toggleModal = function() {
        body.toggleClass('body-locked') ;
        modal_container.toggleClass('dp-block');
    };
$(".open-modal_3").click(function(){
  $(".modal-container_3").fadeIn(1000);
});


open_modal.on('click', toggleModal);
close_modal.on('click', toggleModal);


 });
</script>

I'd like the jQuery to do the hard work for me so that I don't have to repeat a slight variation of the code for each individual modal window (they all have different content in and are called by a user selecting a specific button).

Many thanks in advance
Matt