title: How to enable/disable input field in a table row in javascript without affecting other row(s)
body: <p>I have a form with a dropdown menu followed by a text input field. The input box is disabled by default. Selecting a specified option ("OTHER") from the menu should enable the text field. </p>
  
  <p>Note: The user can add multiple row(s) if he clicks on the icon(+). The other row(s) will not be affected when a certain row selects "OTHER". Only the row(s) having the option "OTHER" will be enable. </p>
  
  <pre><code>&lt;tr id="dataRow"&gt;
      &lt;td&gt;+&lt;/td&gt;
      &lt;td&gt;-&lt;/td&gt;                                           
      &lt;td&gt;
          &lt;select onChange="checkOption(this);"&gt;
           &lt;option value="A"&gt;Option A&lt;/option&gt;
           &lt;option value="B"&gt;Option B&lt;/option&gt;
           &lt;option value="C"&gt;Option C&lt;/option&gt;
           &lt;option value="OTHER"&gt;Other&lt;/option&gt;  
          &lt;/select&gt;
      &lt;/td&gt;                            
      &lt;td&gt;&lt;input id="inputTextBox"&gt;&lt;/td&gt;  
  &lt;/tr&gt;
  </code></pre>
  
  <p>JAVASCRIPT:</p>
  
  <pre><code>function checkOption(obj) {
          var input = document.getElementById("inputTextBox");
          input.disabled = obj.value != "OTHER";
  }
  </code></pre>
  
  <p>Sample:</p>
  
  <pre><code>First Row: Selects OTHER (inputTextBox is enabled)
  User add another Row: Selects Option A (inputTextBox is disabled)
  User add another Row: Selects OTHER (inputTextBox is enabled)
  </code></pre>
  
  <p>The HTML is something like this when multiple row(s) is generated. Sharing the same ids, options..</p>
  
  <pre><code>&lt;tr id="dataRow"&gt;
          &lt;td&gt;+&lt;/td&gt;
          &lt;td&gt;-&lt;/td&gt;                                           
          &lt;td&gt;
              &lt;select onChange="checkOption(this);"&gt;
               &lt;option value="A"&gt;Option A&lt;/option&gt;
               &lt;option value="B"&gt;Option B&lt;/option&gt;
               &lt;option value="C"&gt;Option C&lt;/option&gt;
               &lt;option value="OTHER"&gt;Other&lt;/option&gt;  
              &lt;/select&gt;
          &lt;/td&gt;                            
          &lt;td&gt;&lt;input id="inputTextBox"&gt;&lt;/td&gt;  
      &lt;/tr&gt;
  &lt;tr id="dataRow"&gt;
          &lt;td&gt;+&lt;/td&gt;
          &lt;td&gt;-&lt;/td&gt;                                           
          &lt;td&gt;
              &lt;select onChange="checkOption(this);"&gt;
               &lt;option value="A"&gt;Option A&lt;/option&gt;
               &lt;option value="B"&gt;Option B&lt;/option&gt;
               &lt;option value="C"&gt;Option C&lt;/option&gt;
               &lt;option value="OTHER"&gt;Other&lt;/option&gt;  
              &lt;/select&gt;
          &lt;/td&gt;                            
          &lt;td&gt;&lt;input id="inputTextBox"&gt;&lt;/td&gt;  
      &lt;/tr&gt;
  &lt;tr id="dataRow"&gt;
          &lt;td&gt;+&lt;/td&gt;
          &lt;td&gt;-&lt;/td&gt;                                           
          &lt;td&gt;
              &lt;select onChange="checkOption(this);"&gt;
               &lt;option value="A"&gt;Option A&lt;/option&gt;
               &lt;option value="B"&gt;Option B&lt;/option&gt;
               &lt;option value="C"&gt;Option C&lt;/option&gt;
               &lt;option value="OTHER"&gt;Other&lt;/option&gt;  
              &lt;/select&gt;
          &lt;/td&gt;                            
          &lt;td&gt;&lt;input id="inputTextBox"&gt;&lt;/td&gt;  
      &lt;/tr&gt;
  </code></pre>