JSFiddle - React, Tailwind, and code Playground

by aaronj1335

HTML

<form>
<div class="tr" id="widget306">
  <div class="td col-grab">
    
      <button type="button" class="button grab formwidget" id="widget611">m</button>
    
  </div>

  <div class="td col-name">
    
      <input type="text" name="name" value="target volume profile 1" id="widget607" class="formwidget textbox">
    
  </div>

  <div class="td col-tasks_option">
    
      <input type="text" name="tasks_option" value="msg" id="widget608" class="formwidget textbox">
    
  </div>

  <div class="td col-volume_id">
    
      <input type="text" name="volume_id" value="4" id="widget609" class="formwidget textbox">
    
  </div>

  <div class="td col-security_attributes">
    
      <input type="text" name="security_attributes" value="default" id="widget610" class="formwidget textbox">
    
  </div>

  <div class="td col-set_children">
    
      <button type="button" class="button set-children formwidget" id="widget612">Set children</button>
    
  </div>

</div>
</form>

JavaScript

$('form').on('submit', function() {
    alert('form submitted');
    return false;
});

// by running the following line, which removes all inputs
// except the first one, i get the expected behavior of focusing
// on the input element, pressing the return key, and seeing the
// alert
$('.td:not(".col-name")').remove();