title: How to filter table that contains input cells using javascript?
body: <p>I have a table that take inputs and creates item names and descriptions based on the inputs. Is it possible using Javascript to filter a table that picks up inputs as data? i've found a lot of functioning filters but none seem to work with input cells</p>
  
  <p>i've created a basic version of my table and added a jQuery filter i'm trying to use. As you can see the filter isn't functioning properly with the cell inputs - It also won't remove the filter once you've inputted into the search cell once. i've kept the function that creates new rows as i feel this might be causing problems as well.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function cloneRow() {
      var rowAmmount = document.getElementById("rowAmmount").value;
      var getTotalRows = $('table &gt; tbody').children().length;
      for (var i = -1; i &lt; rowAmmount-1;i++) {
        var row = document.getElementById("row"); // find row to copy
        var table = document.getElementById("table"); // find table to append to
        var clone = row.cloneNode(true); // copy children too
        clone.id = "newRow" + (getTotalRows + i); // change id or other attributes/contents
        clone.classList.remove('hidden');
        table.appendChild(clone); // add new row to end of table
        $('#newRow' + (getTotalRows + i)).children().each(function() {
          $(this).children().attr('id', $(this).children().attr('id') + (getTotalRows + i));
        });
      }
  }
  
  var $rows = $('#table tr');
  
  $('#search').keyup(function() {
  var val = '^(?=.*\\b'
          + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b')
          + ').*$',
      reg = RegExp(val, 'i'),
      text;
  
  $rows.show().filter(function() {
      text = $(this).text().replace(/\s+/g, ' ');
      return !reg.test(text);
  }).hide();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;input id="rowAmmount"/&gt;
  &lt;button id="add" onclick="cloneRow()"&gt;New Row&lt;/button&gt;
  &lt;button type="button" onclick="submit()"&gt;Submit&lt;/button&gt;
  &lt;select id="select"&gt;
    &lt;option value="html"&gt;HTML&lt;/option&gt;
    &lt;option value="packlist"&gt;Packlist&lt;/option&gt;
  &lt;/select&gt;
  &lt;&lt;input type="text" id="search" placeholder="Type to search"&gt;
  &lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;No.&lt;/th&gt;
        &lt;th&gt;Product Code&lt;/th&gt;
        &lt;th&gt;Item Name&lt;/th&gt;
        &lt;th&gt;Long Description&lt;/th&gt;
        &lt;th&gt;Material&lt;/th&gt;
        &lt;th&gt;Material Position&lt;/th&gt;
        &lt;th&gt;Style&lt;/th&gt;
        &lt;th&gt;Colour&lt;/th&gt;
        &lt;th&gt;Dimensions&lt;/th&gt;
        &lt;th&gt;Image&lt;/th&gt;
        &lt;th&gt;Item Name&lt;/th&gt;
        &lt;th&gt;Packlist&lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody  id="table"&gt;
      &lt;tr id="row"&gt;
        &lt;td id="no"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input id="productId" placeholder="Input"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input id="itemname" placeholder="Input"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input id="long" placeholder="Input"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input id="fabric" placeholder="Input"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input id="fabricInput" placeholder="Input 'Yes' 'No' or 'Number'"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input id="style" placeholder="Input"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input id="colour" placeholder="Input"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input id="dimensions" placeholder="Input"&gt;&lt;/td&gt;
        &lt;td &gt;&lt;img id="image" src=""&gt;&lt;/output&gt;&lt;/td&gt;
        &lt;td &gt;&lt;output id="name"&gt;&lt;/output&gt;&lt;/td&gt;
        &lt;td&gt;&lt;output id="description"&gt;&lt;/output&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id= "newRow0"&gt;
        &lt;td id="no0"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input id="productId0" placeholder="Input"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input id="itemname0" placeholder="Input"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input  id="long0" placeholder="Input"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input  id="fabric0" placeholder="Input"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input  id="fabricInput0" placeholder="Input 'Yes' 'No' or 'Number'"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input  id="style0" placeholder="Input"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input  id="colour0" placeholder="Input"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input s id="dimensions0" placeholder="Input"&gt;&lt;/td&gt;
        &lt;td &gt;&lt;img id="image0" src=""&gt;&lt;/output&gt;&lt;/td&gt;
        &lt;td &gt;&lt;output id="name0"&gt;&lt;/output&gt;&lt;/td&gt;
        &lt;td&gt;&lt;output id="description0"&gt;&lt;/output&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>