Why does my javascript prevent me from selecting a radio button more than once? -

i have web donation form on non-profit's website, , people able select one-time gift or monthly gift when give via credit card. if select monthly gift, need send values payment processor, , way seemed toggling disabled attribute hidden form fields. entered in 2 setattribute() javascript functions doing that, , 2 event listeners clicking on radio buttons. problem adding 2 functions , 2 listeners seems have made can click on 'monthly (recurring) gift' option once. 'single gift' starts out checked, , if click on 'monthly (recurring) gift' , click on 'single gift', browser won't let me select 'monthly (recurring) gift' option again. if remove javascript, let me it. why?

here code javascript:

    <form>      <input type="hidden" name="overriderecureday"     id="overriderecureday"     value="y" disabled="disabled">     <input type="hidden" name="rid" id="rid" value="your_rid#"     disabled="disabled">     <input type="hidden" name="recur_times" id="recur_times"     value="your_recur_times" disabled="disabled">      <div id="giftfrequency">     <div id="giftfrequencylabel" class="editor-label2">gift frequency:                            </div>      <div class="editor-radio">     <input type="radio" id="onetimedonation" name="override_recur"     value="" checked="checked"></input> <span>single gift</span>      </div>     <div class="editor-radio">     <input type="radio" id="recurringdonation" name="override_recur"     value="y"></input> <span>monthly (recurring) gift</span>      </div>     </div>     </form>      <script>       var monthlygift = document.getelementbyid("recurringdonation");       var onetimegift = document.getelementbyid("onetimedonation");       var ovrrecurday = document.getelementbyid("overriderecureday");       var recurtimes = document.getelementbyid("recur_times");       var rid = document.getelementbyid("rid");       function enablerecurring () {         monthlygift.setattribute("disabled", "");         ovrrecurday.setattribute("disabled", "");         recurtimes.setattribute("disabled","");       };       function disablerecurring () {         rid.setattribute("disabled", "disabled");         ovrrecurday.setattribute("disabled", "disabled");         recurtimes.setattribute("disabled","disabled");       };        document.getelementbyid("recurringdonation").addeventlistener("click", enablerecurring);       document.getelementbyid("onetimedonation").addeventlistener("click", disablerecurring);     </script> 

jsfiddle scenario javascript http://jsfiddle.net/s1011205/73zstxz0/1/

jsfiddle scenario without javascript http://jsfiddle.net/s1011205/5b47abz0/3/

i have looked elsewhere answer not sure have been successful. person using bootstrap in this one. this one not apply because 2 radio buttons have same name.

the issue radio button being disabled when click reoccurring radio button. i'm not 100% sure trying in enable function. if want intended enable elements, use code below. if not, perhaps did not realize monthlygift reoccuring radio button , can correct line. either way, issue.

function enablerecurring() {   monthlygift.removeattribute("disabled");   ovrrecurday.removeattribute("disabled");   recurtimes.removeattribute("disabled"); };