Simple jQuery show modal and print a print function while selecting a div

Question

So I have three containers. I have a print button that opens a modal. In that modal I am using jQuery to add a div (that is on the page) to the body of the modal. Inside the modal I have a print button that prints just the image. You can see an example here: http://schomphondaoffers.com/test1. Currently when you click print it should pop the modal without the buttons with the special above it. I am getting varied results with the second image showing up in all the modals, and only the first one removes the buttons.

Everything seems to work fine. With just one. I tried to duplicate this bit of code, to use it 3 times (I just replaced one with two and three for the other columns). I'm new to jquery and know there is a much simpler way to write this. I appreciate any help.

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

$('#sales-one').appendTo("body").modal('hide');

$('#print-one').click(function(){
    $('.special-one').printElement();
});

$(function(){
    var oldDiv= $('.special-one').html();
    $('.modal-body').html(oldDiv);  
});

$(function(){
    $('#sales-one').click();
    $('.modal-body').eq(0) //use 1 if you want to remove from second section
    .find('#special-one-button').remove();
});

});

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

$('#sales-two').appendTo("body").modal('hide');

$('#print-two').click(function(){
    $('.special-two').printElement();
});

$(function(){
    var oldDiv= $('.special-two').html();
    $('.modal-body').html(oldDiv);  
});

$(function(){
    $('#sales-two').click();
    $('.modal-body').eq(0) //use 1 if you want to remove from second section
    .find('#special-two-button').remove();
});

});

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

$('#sales-three').appendTo("body").modal('hide');

$('#print-three').click(function(){
    $('.special-three').printElement();
});

$(function(){
    var oldDiv= $('.special-three').html();
    $('.modal-body').html(oldDiv);  
});

$(function(){
    $('#sales-three').click();
    $('.modal-body').eq(0) //use 1 if you want to remove from second section
    .find('#special-three-button').remove();
});

});

Answer 1

jQuery

jQuery(document).ready(function( $ ) {
  $('.btw').click(function(){
    $('.modal-body').html($('.'+$(this).data('class')).html());
    $('.modal-body [id$=-button]').remove();
  });       
});

HTML

<button href="#sales-one" data-class="special-one" class="btw" data-toggle="modal">Print</button>
<button href="#sales-two" data-class="special-two" class="btw" data-toggle="modal">Print</button>
<button href="#sales-three" data-class="special-three" class="btw" data-toggle="modal">Print</button>

Here is an example that hopefully will help.

http://www.bootply.com/104889

I haven't look into refactoring your html too much but I did notice that you are using three modals.. You could factor that down so that your only using one instead of three. But I just worked on re-factoring the code you shared in your question and modifying the html a little so it would work.