I have a webpage that prints out "inventory" from an SQL table and the option to *remove* inventory by entering the *amount to be removed* in the column the *item* is in.

[![pic1](https://i.stack.imgur.com/xQVHc.png)](https://i.stack.imgur.com/xQVHc.png)

Note: The SQL table has the rows "item" and "amount"(inventory), and I added the amount column to the printed HTML table for the ability to remove items from stock.

I want to be able to label each input tag to have the attribute 'name' be equal to the item name.

ex: 

First row - `<input ... name='Apple'>`

Second row - `<input ... name='Banana'>`

I am using jQuery each loop, that prints each column and using attr() to add the attribute but the main issue is that it adds the attribute for each column but it overwrites the name attribute for each column. 

ex:

First pass: `<input ... name='Apple'>`

Second pass: `<input ... name='10'>`

**What I've tried:**

I tried fixing this by adding an if-statement to only add the 'name' attribute to input if the input tag doesn't have one, my thought process was that during the first pass, the input tag doesn't have the name attribute so it'll add one, then during the next pass the if condition will be false and it won't modify the input tag. 

You'll see from the comments in the code what else I've tried but none of it seems to give me the result I need.

Here is the jQuery code I am using to print the HTML table:

```
function DISPLAY_INVENTORY(JSON_DATA) {
    var COL_NAMES = ['Item', 'Inventory', 'Amount'];

    var data = jQuery.parseJSON(JSON_DATA);
    var $TABLE_OBJ = $('<table class="table table-striped" >');
    $TABLE_OBJ.attr('id', 'student_table');
    $list.append($TABLE_OBJ);

    // $(output).append($TABLE_OBJ);

    //Print a table header
    var $ROW_OBJ = $('<tr>');
    var $THEAD = $('<thead class="thead-light">');
    $THEAD.append($ROW_OBJ);
    $TABLE_OBJ.append($THEAD);

    for (var j = 0; j < COL_NAMES.length; j++) {
      var $TB_HEADER = $('<th>');
      $TB_HEADER.html(COL_NAMES[j]);
      $ROW_OBJ.append($TB_HEADER);
    }

    $TBODY = $('<tbody>');

    //Print rows
    for (var i = 0; i < data.length; i++) {
      if (i == data.length - 1) {
        $TABLE_OBJ.append($TBODY);
      }

      $ROW_OBJ = $('<tr>');
      $TBODY.append($ROW_OBJ);

      //Print columns
      $.each(data[i], function(key, value) {
        // if (i % 2 == 0) {
        //   var ITEM_NAME = value;
        // }

        $COL_OBJ = $('<td>');
        $INP_OBJ = $('<input class="text-center form-control" type="text" size="3">');
        if (!$INP_OBJ.attr('name')) {
          $INP_OBJ.attr('name', value);

          // $INP_OBJ.attr('id', ITEM_NAME);
        }

        // $INP_OBJ.attr('name', ITEM_NAME);
        // $INP_OBJ.attr('id', ITEM_NAME);
        $COL_OBJ.html(value);
        $ROW_OBJ.append($COL_OBJ);
      });

      $ROW_OBJ.append($INP_OBJ);
    }
  }

```

The JSON data:

```
[{"item":"Apple","amount":"10"},
{"item":"Banana","amount":"11"},
{"item":"Corn","amount":"12"},
{"item":"Deli Sandwich","amount":"5"},
{"item":"Egg Plant","amount":"12"},
{"item":"French Fries","amount":"15"},
{"item":"Green Beans","amount":"21"},
{"item":"Hamburgers","amount":"7"},
{"item":"Ice Cream","amount":"3"},
{"item":"Jell-O","amount":"12"},
{"item":"Kiwi","amount":"8"},
{"item":"Lima Beans","amount":"32"},
{"item":"Mashed Potatoes","amount":"11"},
{"item":"Noodle Soup","amount":"54"},
{"item":"Orange","amount":"10"},
{"item":"Pear","amount":"5"},
{"item":"Quinoa","amount":"4"},
{"item":"Raisins","amount":"12"},
{"item":"String Cheese","amount":"16"},
{"item":"Tomato Soup","amount":"23"},
{"item":"Unsalted Nuts","amount":"19"},
{"item":"Vienna Sausage","amount":"24"},
{"item":"Wheat Bread","amount":"15"},
{"item":"Xavier Soup","amount":"17"},
{"item":"Yogurt","amount":"11"},
{"item":"Zucchini","amount":"12"}]

```

If anyone could help me out or point me in the right direction with the logic that would be much appreciated! Thank you.