JSFiddle - React, Tailwind, and code Playground

by helgatheviking

HTML

<form class="mnm_form">

<fieldset class="attrobites">
<legend>
Radio
</legend>
<label>A <input type="radio" name="radio" value="a"></label>
<label>B <input type="radio" name="radio" value="b"></label>
</fieldset>

<ul class="products">
<li class="mnm_item"><label><input type="number" name="quantity[red]"/>Red</label></li>
<li class="mnm_item"><label><input type="number" name="quantity[blue]"/>Blue</label></li>
<li class="mnm_item"><label><input type="number" name="quantity[yellow]"/>Yellow</label></li>
</ul>

</form>

CSS

.products>li {
  display: block;
  margin-bottom: 1em;
}

.products>li input {
  margin-right: 1em;
}

JavaScript

/**
 * Main container object.
 */
function WC_MNM_Container($form) {

  var container = this;
  this.$mnm_form = $form;

  /**
   * Object initialization.
   */
  this.initialize = function() {

    this.$mnm_items = this.$mnm_form.find('.mnm_item');
    this.child_items = {};

    this.init_child_items();

    this.bind_event_handlers();

  };

  /**
   * Initialize child item objects.
   */
  this.init_child_items = function() {

    console.debug("initialize child items", container.$mnm_items);

    container.$mnm_items.each(
      function(index) {

        container.child_items[index] = new WC_MNM_Child_Item(container, $(this), index);

        //container.bind_child_item_event_handlers( container.child_items[ index ] );

      }
    );
  };

  /**
   * Container-Level Event Handlers.
   */
  this.bind_event_handlers = function() {
    container.$mnm_form.on('change.wc-mnm-form', '.mnm_item :input', function(e) {
      console.debug("change event", this);
    });

  };

}

/**
 * Child Item object.
 */
function WC_MNM_Child_Item(container, $mnm_item, index) {

  this.initialize = function() {

    this.$self = $mnm_item;

    this.$mnm_item_qty = $mnm_item.find(':input');

    this.update_quantity = this.update_quantity.bind(this);
    this.$mnm_item_qty.on('change.wc-mnm-form', this.update_quantity);

  };

  this.update_quantity = function() {
    console.debug("update quantity", this);
  };

  this.initialize();

}


/*-----------------------------------------------------------------*/
/*  Initialization.                                                */
/*-----------------------------------------------------------------*/

/**
 * Script initialization on '.mnm_form' jQuery objects.
 */
$.fn.wc_mnm_form = function() {

  // @todo - Do we need a way to prevent duplicate containers?
  if ('undefined' !== typeof this.data('script_id') && 'undefined' !== typeof(wc_mnm_scripts[this.data('script_id')])) {
    wc_mnm_scripts[this.data('script_id')].shutdown();
 ...