<ul class="list-group" id="dataGrid">
  <li class="list-group-item" id="dataGridRow1" prototype="GridRow">
    <input data-id="txtValue" type="text" />
    <button data-id="cmdUpperCase">To uppercase</button>
    <button data-id="cmdLowerCase">To lowercase</button>
    <button data-id="cmdSave">Save</button>
  </li>
  <li class="list-group-item" id="dataGridRow2" prototype="GridRow">
    <input data-id="txtValue" type="text" />
    <button data-id="cmdUpperCase">To uppercase</button>
    <button data-id="cmdLowerCase">To lowercase</button>
    <button data-id="cmdSave">Save</button>
  </li>
</ul>

<script>
class GridRow {
    constructor() {
       this.state = {
          value: this.select("input[data-id='txtValue']").value
       }
    }
    
    function cmdUpperCaseClick() {
       this.setState({value: value.toUpperCase()});
    }

    function cmdLowerCaseClick() {
       this.setState({ value: value.toLowerCase() });
    }
    
    function cmdSaveClick() {
       ajaxSave(this.state);
    }
}
</script>