I'm building a site in WordPress that uses the donation plugin Charitable. On the donation page, there are two sections with two sets of radio buttons for donation values. The plugin does not have a feature that I want to include, and they will not support the feature that I am trying to build.

I want to display some content when a user selects a donation amount. I've been trying to use Code Snippets, which is a separate plugin supported by Charitable, but I've only made limited progress. My limited coding knowledge is holding me back.

I have two code snippets: one in PHP and one in JavaScript. The PHP snippet adds the custom content in the desired location, and the JavaScript snippet controls which div is displayed when a radio button (donation amount) is clicked.

My problem is that when I click a donation amount, it only displays the content in the single donation HTML section, but not in the recurring donation HTML section. I've tried targeting the radio buttons in other ways, but I'm falling short.

PHP snippet

add_action('charitable_donation_form_after_donation_amounts', 'add_custom_content');
function add_custom_content(){
    echo '
Single £5 is selected
    
Single £10 is selected
    
Single £25 is selected
    
Single £50 is selected
    
Single Custom amount is selected
';
}

add_action('charitable_recurring_donation_form_after_donation_amounts', 'add_custom_content_rec');
function add_custom_content_rec() {
    echo '
Recurring £5 is selected
    
Recurring £10 is selected
    
Recurring £25 is selected
    
Recurring Custom amount is selected
';
}

JavaScript snippet

jQuery(function ($) {
var sglAmountSection = document.getElementsByName('donation_amount');

for (var i = 0; i < sglAmountSection.length; i++) {
        sglAmountSection[i].onclick = function() {
    $(".sgl-content").css('display', 'none'); // Hide all sgl divs
        $(".sgl" + this.value).css('display', 'block'); // Show the selected div
        }
    }
});

jQuery(function ($) {
var recAmountSection = document.getElementsByName('donation_amount');

for (var i = 0; i < recAmountSection.length; i++) {
        recAmountSection[i].onclick = function() {
    $(".rec-content").css('display', 'none'); // Hide all rec divs
        $(".rec" + this.value).css('display', 'block'); // Show the selected div
        }
    }
});

HTML

   
The minimum donation for this campaign is £5.
   
Your Donation

   

      

         

            
            One Time
         
         

            
            Monthly
         
      

      

         
         

            

               
               
               £5  / month 
               
            
            

               
               
               £10  / month 
               
            
            

               
               
               £25  / month                 
               
            
            

               
               
               
               Custom amount
               
               
               
            
         

         
         
Recurring £5 is selected
         
Recurring £10 is selected
         
Recurring £25 is selected
         
Recurring Custom amount is selected
      
      
      

         
         

            

               
               
               £5 
               
            
            

               
               
               £10 
               
            
            

               
               
               £25 
               
            
            

               
               
               £50 
               
            
         
         

            

               
               
               Custom amount
               
               
               
            
         
         
         
Single £5 is selected
         
Single £10 is selected
         
Single £25 is selected
         
Single £50 is selected
         
Single Custom amount is selected