JSFiddle - React, Tailwind, and code Playground

by Richard Hardesty

HTML

<table>
<tr>
   <td colspan="2">
     <div class="sub-head bg-warning">
       <strong>Handover - Action Improvements</strong>
         <select class="form-control pull-right" name="capability_Handover" onchange="showDropDown('ncHandover', this.value)">
          <option value="0"> -- Options -- </option>
          <option value="C">Compliant</option>
          <option value="OBS">Observation</option>
          <option value="NC">Non-Compliant</option>
          <option value="N/A">Not Applicable</option>
        </select>
      </div>
   </td>
</tr>
<tr>
  <td colspan="2">
    <div id="ncHandover">
     <strong>Handover - OBS/NC Evidence</strong><br />
     <textarea class="form-control" rows="3" name="handover_nc" placeholder="Enter any Non Conformaties"></textarea>
   </div>
 </td>
</tr>
</table>
<table class="table table-bordered">
  <thead>
   <tr>
     <th>
      <h3>
       <strong>Summary</strong>
      </h3>
     </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <textarea name="summary" rows="5" class="form-control" id="summary"></textarea>
      </td>
    </tr>
  </tbody>
 </table>

JavaScript

var $summary = $('#summary');
    var testSelect = function () {
        $('select option:selected').each(function () {
            if ($(this).val() == "NC") {
                $(this).find('textarea').val().appendTo($summary);
              
            }
        });
    }

$('body').on('change', testSelect);