title: Convert HTML table row to object without HTML tags
body: <p>I have a table populated from a Webapi call. I'm allowing a person to make changes to the section via selector. What i need to do is get the name of the section, the "add level", "edit Level", "Delete Level" and "read Level" for each row.
  What i had planned to do was SerializeArray() to get the value pairs(name / value) which does work, except that i have to add a differentiation to the names (add, inquire, edit, etc) to identify which goes where
  What I currently have</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form id="InventoryFrm" &gt;
    &lt;table id="InventoryTable"&gt;
      &lt;thead&gt;
        &lt;tr id="Columns"&gt; 
          &lt;th&gt; &lt;i class="fa fa-chevron-down"&gt;&lt;/i&gt; Inventory&lt;/th&gt;
          &lt;th&gt;Add Level&lt;/th&gt;
          &lt;th&gt;Edit Level&lt;/th&gt;
          &lt;th&gt;Delete Level&lt;/th&gt;
          &lt;th&gt;Inquire Level&lt;/th&gt;
          &lt;th&gt;Last Updated&lt;/th&gt;
          &lt;th&gt;Updated By&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody class="InventoryTableBody" &gt;
  
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>var InventoryBody = $('.InventoryTableBody');
   $.each(res.Inventory, function(index,value){
   $.each(value, function(id, val){ 
  InventoryBody.append(` &lt;tr&gt;&lt;td&gt;${value[id].EntityName}&lt;/td&gt;
  &lt;td&gt;&lt;select id="${value[id].EntityName}add"&gt; &lt;option&gt;${value[id].AddLevel[0]}&lt;/option&gt;&lt;option&gt;${value[id].AddLevel[1]}&lt;/option&gt;&lt;option&gt;${value[id].AddLevel[2]}&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;  
   &lt;td&gt; &lt;select id="${value[id].EntityName}edit"&gt; &lt;option&gt;${value[id].EditLevel[0]}&lt;/option&gt;&lt;option&gt;${value[id].EditLevel[1]}&lt;/option&gt;&lt;option&gt;${value[id].EditLevel[2]}&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;  
   &lt;td&gt; &lt;select id="${value[id].EntityName}delete"&gt; &lt;option&gt;${value[id].DeleteLevel[0]}&lt;/option&gt;&lt;option&gt;${value[id].DeleteLevel[1]}&lt;/option&gt;&lt;option&gt;${value[id].DeleteLevel[2]}&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;
  &lt;td&gt; &lt;select id="${value[id].EntityName}inquire"&gt; &lt;option&gt;${value[id].InquireLevel[0]}&lt;/option&gt;&lt;option&gt;${value[id].InquireLevel[1]}&lt;/option&gt;&lt;option&gt;${value[id].InquireLevel[2]}&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt; &lt;/tr&gt;`);
                    })
                  })
  
  
  var InvFm=$("#InventoryFrm").serializeArray();
  </code></pre>
  
  <p>Which gives me an object like so</p>
  
  <pre class="lang-js prettyprint-override"><code>{name: "Items add", value: "All"}
  {name: "Items edit", value: "All"}
  {name: "Items delete", value: "All"}
  {name: "Items inquire", value: "All"}
  </code></pre>
  
  <p>This is technically all one row for "Items" and should be something like</p>
  
  <pre><code>Name: "Items" Add: "All" Edit: "All" Delete: "All" Inquire: "All"
  </code></pre>
  
  <p>The idea is that it is dynamic so someone can change it as needed so Items isn't "hard-coded" in either.
  If i get the TR i have to deal with the HTML  which means even more unnecessary data to weed out.
  Is there a better way that i'm missing/overthinking to get the Relevant Data from the Row or am i stuck converting </p>