JSFiddle - React, Tailwind, and code Playground

by IS2016

HTML

<div id="USAPubHealthYesNo">
  <ol type="a" class="indentList">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <li>
      <input name="rbPubHealthYesNo" type="radio" class="radiobuttonfield days5" alt="Yes - five (5) day MDR report is required" title="Yes - five (5) day MDR report is required" value="Yes" />Yes - five (5) days MDR report is required
      <div id="calc14" class="indentListCalc">
        <input id="dt5Days" type="text" class="textfieldCalc labelWidth25" />
      </div>
    </li>
    <br>
    <li>
      <input name="rbPubHealthYesNo" type="radio" class="radiobuttonfield days30" alt="No - thirty (30) day MDR report required" title="No - thirty (30) days MDR report required" value="No" />No - thirty (30) day MDR report required
      <div id="calc15" class="indentListCalc">
        <input id="dt30Days14" type="text" class="textfieldCalc labelWidth25" />
      </div>
      <br>
    </li>
  </ol>
</div>

JavaScript

var radios = document.querySelectorAll('input[type=radio][name="rbPubHealthYesNo"]');

function changeHandler(event) {
   if ( this.value === 'Yes' ) {
     date5Days();
   } else if ( this.value === 'No' ) {
    date30Days14();
   }  
}

Array.prototype.forEach.call(radios, function(radio) {
   radio.addEventListener('change', changeHandler);
});


function date30Days14(){
    
var dt = new Date();
dt.setDate( dt.getDate() + 30 );
var mo = dt.getMonth() + 1; // JS months are 0 to 11, so need to add 1
var dy = dt.getDate();
var yr = dt.getYear() % 100; // just to make sure only 2 digit year
var dueDate = (mo < 10 ? "0" : "" ) + mo + "/" + ( dy < 10 ? "0" : "" ) + dy + "/" + (yr < 10 ? "0" : "" ) + yr;
var text = "30 days from today is ";
   
  document.getElementById('dt30Days14').value = text + dueDate;
  document.getElementById('dt5Days').value = "";
        
}


v