Unable to display the JSON data in the dropdown list in html table

Question

I have an HTML table with 4 rows which has Order ID and Product Comments columns disabled and in other columns user can enter the data and submit. When user enters data and clicks on the submit button, I get a JSON object as a return value which I'm iterating and displaying in the table.

I have two road blocks here where help is required.

1. When the user clicks on the submit button, submitData() function is called where I'm getting jsonData which is iterated and shown in the table, but with my code Product1, Product2 columns which are dropdown lists, are not displaying the data.

2. Another issue is when the user clicks on the submit button and get the data and shown in the table, I want to make "Product Comments" column as editable(enabled) and all other columns to be in disabled mode.

Code demo : https://plnkr.co/edit/CEAYKI1SGuobosye1Pqk?p=preview

Below is the sample code I tried:

//populate dropdown with the value

function populateSelect() {
  var ids = [{
    "pid": "laptop",
    "des": "laptop"
  }, {
    "pid": "Mobile",
    "des": "Mobile"
  }, {
    "pid": "IPAD mini.",
    "des": "IPAD mini."
  }]
  var productDropdown1 = $(".product1");
  var productDropdown2 = $(".product2");
  $.each(ids, function(index, value) {
    $("<option />").text(value.des).val(value.pid).appendTo(productDropdown1);
    $("<option />").text(value.des).val(value.pid).appendTo(productDropdown2);
  });

  $("select").change(function() {
    var row = $(this).closest("tr");
    var product1_drop = $('.product1', row).val();
    var product2_drop = $('.product2', row).val();
    var descValue = $('input[name="description"]', row).val();
    if (product1_drop && product2_drop)
      validate(product1_drop, product2_drop, descValue);
  });

  $('input[name="description"]').on('input', function(e) {
    var row = $(this).closest("tr");
    var product1_drop = $('.product1', row).val();
    var product2_drop = $('.product2', row).val();
    console.log("-inut -product1_drop----- " + product1_drop);
    if (product1_drop && product2_drop)
      validate(product1_drop, product2_drop, $(this).val());
  });
}

function validate(prod1, prod2, desc) {
  if (desc && prod1 === prod2) {
    alert('Product1 and Product2 cannot have same value');
  }
}

function submitData() {
  var flag = true;
  if (flag) {
    //after getting the values from backend hide the table1 and show table2
    var jsonData = [{
        "oid": "1023",
        "Product1": "laptop",
        "description": "Silver color",
        "product2": "IPAD Mini",
        "comments": "user comments row1",
        "productComments": "Product comments row1"
      },
      {
        "oid": "1024",
        "Product1": "Mobile",
        "description": "Samsung",
        "product2": "IPAD Mini",
        "comments": "user comments row2",
        "productComments": "product comments row2"
      }
    ];

    //iterate and show the jsonData in the table2 when user click on submit button
    $.each(jsonData, function(key, val) {
      $('#productTable tr:eq(' + [key + 1] + ') td:eq(0) input').val(val.oid);
      $('#productTable tr:eq(' + [key + 1] + ') td:eq(1) select').val(val.product1);
      $('#productTable tr:eq(' + [key + 1] + ') td:eq(2) input').val(val.description);
      $('#productTable tr:eq(' + [key + 1] + ') td:eq(3) select').val(val.product2);
      $('#productTable tr:eq(' + [key + 1] + ') td:eq(4) input').val(val.comments);
      $('#productTable tr:eq(' + [key + 1] + ') td:eq(5) input').val(val.productComments);
    });
  }
}

$(document).ready(function() {
  populateSelect();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<table id="productTable" border="1">

  <tr>
    <th>Order ID</th>
    <th>Product1</th>
    <th>Description</th>
    <th>Product2</th>
    <th>Comments</th>
    <th>Product Comments</th>
  </tr>

  <tr>
    <td><input type="text" name="orderNum" value="" id="orderNum1" disabled></td>
    <td>
      <select class="product1" id="prod1">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="description" value="">
    </td>
    <td>
      <select class="product2" id="product2">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="Comments" value="">
    </td>
    <td>
      <input type="text" name="productComments" value="" disabled>
    </td>
  </tr>
  <tr>
    <td><input type="text" name="orderNum" value="" id="orderNum2" disabled></td>
    <td>
      <select class="product1" id="prod2">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="description" value="">
    </td>
    <td>
      <select class="product2">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="Comments" value="">
    </td>
    <td>
      <input type="text" name="productComments" value="" disabled>
    </td>
  </tr>
  <tr>
    <td><input type="text" name="orderNum" value="" id="orderNum3" disabled></td>
    <td>
      <select class="product1" id="prod3">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="description" value="">
    </td>
    <td>
      <select class="product2">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="Comments" value="">
    </td>
    <td>
      <input type="text" name="productComments" value="" disabled>
    </td>
  </tr>
  <tr>
    <td><input type="text" name="orderNum" value="" id="orderNum4" disabled></td>
    <td>
      <select class="product1" id="prod4">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="description" value="">
    </td>
    <td>
      <select class="product2">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="Comments" value="">
    </td>
    <td>
      <input type="text" name="productComments" value="" disabled>
    </td>
  </tr>
</table> <br>
<input type="submit" value="submit" onclick="submitData()">
</body>

</html>

---Edited---- One more issue i'm facing is if the jsonData i'm getting when user click on submit button has any null value, i want to display the data in the row but show the row with red color and don't want to disable the fields so that user can again enter the data..

example :

   var jsonData = [{
          "oid": "1023", 
          "product1": "laptop",  
          "description": "Silver color",
          "product2": "Mobile", 
          "comments":"user comments row1",
          "productComments":"Product comments row1"
        },
        {
          "oid": null,
          "product1": "Mobile", 
          "description": "Samsung",
          "product2": "laptop",
          "comments":"user comments row2",
          "productComments":"product comments row2"
        } 
      ];

In the above jsonData, the second row value oid is null, so i want to show the second row highlighted with red color and don't disable the fields. and reset/clear all the input which user has entered before the clicking the submit button.

Code i used to reset the user entered values before clicking on submit button:

   $('#productTable input[type="text"]').val('');
   $('.product1').val(''); 

Updated plunker : https://plnkr.co/edit/aEEFFSndWOpbGHp43bQT?p=preview

Answer 1

For product1 it is working correctly. For product2, it is only a grammaticaly error in "product2": "IPAD Mini" what should be "product2": "IPAD Mini." with dot in the end.

To change the enable of the fields:

$('#productTable input, #productTable select').attr("disabled", "disabled");

$('#productTable tr ').each(function(){
    $('td:eq(2) input', this).removeAttr("disabled");
});