JSFiddle - React, Tailwind, and code Playground

by chad

HTML

<div id="btngroup">
     <table>
       <tr>
        <td><input type="checkbox" name="change" id="change"/> </td>
       <td>Do you have multiple answers</td>

     </tr>
        <tr>
         <td>
      <textarea id="editor2" cols="50" rows="3" style="padding:5px;" name="myeditor1" >   
         </textarea></td>
        <td>
         <span><input type="radio" name="btngroup" id="btn-1"/></span>
         <label for="btn-1">Button 1</label><br/>
        </td>
       </tr>
   </table>
</div>

CSS

textarea {
    width: 200px;
}
td {
    padding: 5px;
}

JavaScript

$(document).ready(function () {
               $('#change').click(function () {
                   if ($('#change:checked').length > 0) {
                       var myType = "checkbox";
                   } else {
                       var myType = "radio";
                   }
                   $('#btngroup span').each(function (i) {
                       $(this).html('<input type="' + myType + '" name="btngroup" id="btn-' + (i + 1) + '">');
                   });
               });
          });