Form with Jquery not passing variables

Question

We found this form on Codepen and we would like to implement it but testing it shows it does not work https://codepen.io/seattleby/pen/YdpoWV

So we changed the email address and its not working does anyone know what is wrong with this form...

Paypal reports the account is inactive but its not or it reports problem with the form and that something went wrong...

HTML

<div class="donate_form">
    <div class="row">
        <div class="col-xs-12 tabs">
            <a href="#monthly" class="btn_styles monthly active">
        Monthly                         
      </a>
      <a href="#once" class="btn_styles once">
        Give Once                           
      </a>
        </div>
    </div>
    <form action="https://www.paypal.com/cgi-bin/webscr" method="post" id="once" style="display: none;">
        <!-- Identify your business so that you can collect the payments. -->
        <input type="hidden" name="business" value="[email protected]">
        <!-- Specify a Donate button. -->
        <input type="hidden" name="cmd" value="_donations">
        <!-- Specify details about the contribution -->
        <!-- <input type="hidden" name="item_name" value="Friends of the Park">
                        <input type="hidden" name="item_number" value="Fall Cleanup Campaign"> -->
        <input type="hidden" name="currency_code" value="USD">
        <input type="hidden" name="charset" value="utf-8">
    
              <div class="row">
            <div class="col-xs-12 tabs"> 
              <a href="" class="btn_styles donate-box" data-value="75">
               $75                          
              </a>
              <a href="" class="btn_styles donate-box active" data-value="50">
               $50                          
              </a>
              <a href="" class="btn_styles donate-box" data-value="25">
               $25                          
              </a>
            </div>
          </div>
    
        <div class="row">
            <div class="col-xs-12">
                <div class="description">Select or enter an amount to give. Thank you!</div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="body">

                    <div class="input">
                        <input type="number" name="amount" value="50">
                        <div class="addition">USD</div>
                    </div>
                    <div class="info">Mobile Library Donation</div>
                    <div class="donate_buttons">
                        <!-- Display the payment button. -->
                        <input type="submit" value="Donate Once" alt="Donate Once" class="btn_styles">
                        <img alt="" width="1" height="1" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif">
                    </div>
                </div>
            </div>
        </div>
    </form>
    <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" id="monthly">
        <!-- Identify your business so that you can bill for payments. -->
        <input type="hidden" name="business" value="[email protected]">
        <!-- Specify an Automatic Billing button. -->
        <input type="hidden" name="cmd" value="_xclick-subscriptions">
        <!-- Specify details about the automatic billing plan. -->
        <input type="hidden" name="lc" value="US">
        <input type="hidden" name="no_note" value="1">
        <input type="hidden" name="no_shipping" value="1">
        <input type="hidden" name="src" value="1">
        <input type="hidden" name="p3" value="1">
        <input type="hidden" name="t3" value="M">
        <input type="hidden" name="currency_code" value="USD">
        <!-- Make sure you get the buyer's address during checkout. -->
        <input type="hidden" name="no_shipping" value="2">
        <input type="hidden" name="charset" value="utf-8">
    
          <div class="row">
            <div class="col-xs-12 tabs"> 
              <a href="" class="btn_styles donate-box" data-value="30">
               $30                          
              </a>
              <a href="" class="btn_styles donate-box active" data-value="20">
               $20                          
              </a>
              <a href="" class="btn_styles donate-box" data-value="10">
               $10                          
              </a>
            </div>
          </div>    
    
        <div class="row">
            <div class="col-xs-12">
                <div class="description">Select or enter an amount to give per month. Thank you!</div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="body">

                    <div class="input">
                        <input type="number" name="a3" value="20">
                        <div class="addition">USD / MONTH</div>
                    </div>
                    <div class="info">Mobile Library Donation</div>
                    <div class="donate_buttons">
                        <!-- Display the Automatic Billing button. -->
                        <input type="submit" value="Donate Monthly" alt="Donate Monthly" class="btn_styles">
                        <img alt="" width="1" height="1" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif">
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

CSS

.btn_styles {
    display: inline-block;
    max-width: 100%;
    line-height: 1;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    border: none;
    padding: 0;

    &:hover {
        text-decoration: none;
        outline: none;
    }
    &:focus {
        animation-name: none;
         outline: none;
    }
}

.donate_form {
        max-width: 460px;
        margin: 0 auto;

        @media (max-width: 767px) {
            margin-bottom: 30px;
        }

    .tabs {
        margin-bottom: 15px;
    
        .btn_styles {
            width: 50%;
            float: left;
            border: 1px solid #111;
            height: 35px;
            line-height: 35px;
            font-size: 18px;
            text-decoration: none;
      text-align: center;

            &:not(.active) {    
        background-color: #fff;
                color: #111;
            }
            &.active {          
                background-color: #111;
                color: #fff;
            }
        }
    }
  .donate-box {
    width: 33.3% !important;
  }
    .input {
        position: relative;

        &:before {
            content: '$';
            position: absolute;
            left: 18px;
            top: 50%;
            transform: translateX(-100%) translateY(-50%);
      z-index: 1;
        }
        input[type="number"] {
            height: 50px;
            line-height: 50px;
            width: 100%;
            padding: 0 120px 0 20px;
            color: #111;
            font-size: 20px;
      border: 1px solid #111;
      background-color: #fff;

            &::-webkit-inner-spin-button, 
            &::-webkit-outer-spin-button { 
                -webkit-appearance: none; 
                margin: 0; 
            }
        }
        .addition {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
        }
    }
    #monthly .input {
        input[type="number"] {
            padding: 0 120px 0 20px;
        }
    }
    #once .input {
        input[type="number"] {
            padding: 0 55px 0 20px;
        }
    }
    .description {
        background-color: #d7d9dc;
    color: #111;
        padding: 25px;
        text-align: center;
        border: 1px solid #111;
    }
    .body {
        border: 1px solid #111;
        border-top: none;
        padding: 25px;

        .info {
            margin-bottom: 20px;
            color: #111;
        }
        .donate_buttons {
            .btn_styles {
                background-color: #ffcc33;
                height: 50px;
                line-height: 50px;
                color: #111;
                width: 100%;
        border: 1px solid #111;
            }
        }
    }
}

Then the Jquery

jQuery(document).ready(function($) { 
$('.tabs .btn_styles').click(function() {
        if(!$(this).hasClass('active')) {
          let active, parent, tab;
          active = $(this);
          parent = $(this).closest('.tabs').first();
          parent.find('.btn_styles').each(function() {
            tab = $($(this).attr('href'));
            if($(this).is(active)) {
              $(this).addClass('active');
              if(tab.length > 0) tab.show();
            } else {
              $(this).removeClass('active');
              if(tab.length > 0) tab.hide();
            }
          });
        }

        return false;
    });
  $('.donate_form form .btn_styles').click(function() {
     let parent = $(this).closest('form').first();
      parent.find('input[type="number"]').val($(this).data('value'));
  });
});