click on element show , again click did not show why

click on element show , again click did not show why

I have two <div> and two <a> buttons,  when I click first <a> button it show related content with that <a>,  similaly when I click on second <a> its show related contents. Code is given bellow here
Problem here is that , When I click first time on <a> id="infradi-rolno-slip" it works fine, when I click again <a> id="infradi-rolno-slip" it removes the contents $( "#infradi-rolno-slip-form") but dont show again it? why how to fix it. 
<a href=# id="infradi-rolno-slip" class="button button-glow button-border button-rounded button-primary">انفرادى رول نمبر سلپ</a>
<a href=# id="madaris-rolno-slip" class="button button-glow button-border button-rounded button-primary">مدارس رول نمبر سلپ</a>
<div class="col-md-7 col-md-push-3 animated fadeInRight animation-delay-5" id="madaris-rolno-slip-form" style="display: none;">
</div>
<div class="col-md-7 col-md-push-3 animated fadeInRight animation-delay-5" id="infradi-rolno-slip-form" style="display: none;">
</div>
There is a third <div> where I want to replace above two <div> on click <a>
<div class="row" id="replace-row">
      <!-- here content is replace with forms-->
</div>
Jquery code is :
<script>
    $(document).ready(function () {

        $('#marakiz').on('click', function(){
            $('#marakiz-Modal').show();
        });

        $('#madaris-rolno-slip').on('click', function(){
            $('#replace-row').empty();
            $( "#madaris-rolno-slip-form").show().appendTo( "#replace-row" );
            
        });

        $('#infradi-rolno-slip').on('click', function(){
            $('#replace-row').empty();
            $( "#infradi-rolno-slip-form").show().appendTo( "#replace-row" );
            
        });

    });
</script>