Two jqgrids on same page and the change color of second - jqgrid

Question

We are creating a warehouse picking list using two JQGrids on the same page. The top grid displays the available items and the lower grid displays the items chosen. Each time an item is chosen fro the top grid it appears in the bottom grid.
At the moment both grids have the same CSS stype applied (Standard blue). We would like the lower grid to appear green
As a trial we added code into the second grid
gridComplete: function(){
$("tr.jqgrow:odd").css("background", "#E0E0E0");
},
but on page loading both grids change.
Ideally we would like to apply a different theme to the second grid to distinguish it from the first.
$(document).ready(function() {
var d = new Date().toISOString().slice(0, 19).replace(new RegExp("-", "g"), '').replace('T', '-').replace(new RegExp(":", "g"), '');
$('#pick_list_name').val(d.substr(6,9));
//PICK-20190809-152626
$('#btn_report').click(function() {
//alert(document_referrer);
var myPath = "";
if(document.referrer.search("192.168.1.") > 1 ){
myPath = "wms-mfsl/printed_reports/";
}else{
myPath = "printed_reports/"
}
var pdf_url="print_daily_control_sheet.php?d=" + $('#report_date').val();
//alert(pdf_url);
$.ajax({url: pdf_url,
success: function(result){
//alert (result);
var pdf_print = myPath + "daily_control_sheet1.pdf";
var ret = printJS(pdf_print);
}
});
});
$("#list").jqGrid({
url: "ajax_get_consignments_for_grid.php",
datatype: "json",
mtype: "GET",
colModel: [
{ name: "picked", width: 10, align: "center" ,label:'Picked'},
{ name: "pick_list_name", width: 10, align: "center" ,label:'Pick list'},
{ name: "id", width: 15, align: "center" ,label:'GRN'},
{ name: "customer_name", width: 15, align: "center" ,label:'Customer'},
{ name: "destination", width: 15, align: "center" ,label:'Destination'},
{ name: "awb", width: 15, align: "center" ,label:'AWB'},
{ name: "house_awb", width: 15, align: "center" ,label:'House'},
{ name: "p_ref", width: 15, align: "center" ,label:'P-REF'},
{ name: "total_pieces", width: 10,align: "center" ,label:'Pces Expt'},
{ name: "pieces_arrived", width: 10, search:false,align: "center" ,label:'Pces Rcvd'},
{ name: "total_weight", width: 10, search:false,align: "center" ,label:'Weight'},
{ name: "total_volume", width: 10, search:false,align: "center" ,label:'Volume Wt'},
{ name: "description", width: 15, search:false,align: "center" ,label:'Description'}
],
pager: $('#pager'),
rowNum: 10,
rowList: [5,10,20],
sortname: "id",
sortorder: "desc",
viewrecords: true,
gridview: true,
autoencode: true,
caption: "Pick list",
height: "50%",
autowidth: true,
shrinkToFit: true,
onCellSelect: function(rowid, icol, cellcontent, e) {
var picked = $('#list').jqGrid('getCell', rowid, 'picked')
$.ajax({
url: "ajax_update_pick_list.php" ,
data: {id:rowid, pick_list_name:rowid, picked:picked},
success: function(result){
$('#list').trigger('reloadGrid');
}
});
},
editurl:"",
postData: { 'keyword': function () { return $("txtKeyword").val(); } }
});
jQuery("#list").jqGrid('bindKeys');
$(window).bind('resize', function() {
//$("#list").setGridWidth($(window).width()-18);
}).trigger('resize');
$("#list").jqGrid('navGrid',"#pager",
{
del:false,
edit:false,
add:false,
search:true
},
{width:450},
{
closeAfterEdit:true,
afterComplete: function (response) {
alert (response.responseText);
},
});
/*
* Here is list two which show the items that have been picked
*/
$("#list2").jqGrid({
url: "ajax_get_consignments_for_grid.php",
datatype: "json",
mtype: "GET",
colModel: [
{ name: "picked", width: 10, align: "center" ,label:'Picked'},
{ name: "pick_list_name", width: 10, align: "center" ,label:'Pick list'},
{ name: "id", width: 15, align: "center" ,label:'GRN'},
{ name: "customer_name", width: 15, align: "center" ,label:'Customer'},
{ name: "destination", width: 15, align: "center" ,label:'Destination'},
{ name: "awb", width: 15, align: "center" ,label:'AWB'},
{ name: "house_awb", width: 15, align: "center" ,label:'House'},
{ name: "p_ref", width: 15, align: "center" ,label:'P-REF'},
{ name: "total_pieces", width: 10,align: "center" ,label:'Pces Expt'},
{ name: "pieces_arrived", width: 10, search:false,align: "center" ,label:'Pces Rcvd'},
{ name: "total_weight", width: 10, search:false,align: "center" ,label:'Weight'},
{ name: "total_volume", width: 10, search:false,align: "center" ,label:'Volume Wt'},
{ name: "description", width: 15, search:false,align: "center" ,label:'Description'}
],
gridComplete: function(){
//$("tr.jqgrow:odd").css("background", "#E0E0E0");
},
pager: $('#pager2'),
rowNum: 10,
rowList: [5, 10, 20],
sortname: "id",
sortorder: "desc",
viewrecords: true,
gridview: true,
autoencode: true,
caption: "Items to be picked",
height: "50%",
autowidth: true,
shrinkToFit: true,
onCellSelect: function (rowid, icol, cellcontent, e) {
var picked = $('#list').jqGrid('getCell', rowid, 'picked');
$.ajax({
url: "ajax_update_pick_list.php",
data: {
id: rowid,
pick_list_name: rowid,
picked: picked
},
success: function (result) {
$('#list').trigger('reloadGrid');
}
});
},
editurl:"",
postData: { 'keyword': function () { return $("txtKeyword").val(); } }
});
We expected the second grid to display differently to the first but both change.

Answer 1

The version you used is too old and is no more supported. Please consider switch to one of the latest Guriddo jqGrid or free-jqGrid.
Your code will set the background to all grids, since it is to common.
To set on particular grid you will need to specify the id something like this
gridComplete: function(){
$("tr.jqgrow:odd", "#list2").css("background", "#E0E0E0");
},