Hide element button - php

Question

I have a hide button code which does hide any div or element i want however the problem is i have a data table which displays more than one select option for each row in the table
if the order has 3 items it will display the 3 items with the 3 select options
however the hide button only works for the first one and not for the other 2 each select option has its own button generated
my code is below
<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<script>
$(document).ready(function () {
$(".edit_status_combo").change(function (event) {
var row_id = $(this).closest("tr").find(".row_id").val();
var delivery_id = $(this).closest("tr").find(".delivery_id").val();
var status = $(this).closest("tr").find(".edit_status_combo").val();
jQuery.ajax({
type: "POST",
url: "<?php echo base_url(); ?>" + "index.php/sales/view_delivery",
data: {row_id: row_id, delivery_id:delivery_id, i_status: status}
})
})
})
jQuery(document).ready(function(){
jQuery('#hideshow1').on('click', function(event) {
jQuery('#edit_status_combo').toggle('show');
});
});
</script>
<div class="modal-dialog modal-lg no-modal-header">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="fa fa-2x">×</i>
</button>
<button type="button" class="btn btn-xs btn-default no-print pull-right" style="margin-right:15px;" onclick="window.print();">
<i class="fa fa-print"></i> <?= lang('print'); ?>
</button>
<?php if ($logo) { ?>
<div class="text-center pull-left" style="margin-bottom:20px;" >
<img src="<?= base_url() . 'assets/uploads/logos/' . $biller->logo; ?>"
alt="<?= $biller->company != '-' ? $biller->company : $biller->name; ?>">
</div>
<?php } ?>
<div class="table-responsive">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style = "border-collapse: collapse;" >
<tbody style="font-size: 12px !important;">
<tr>
<td><div class="col-xs-19 text-left"><?= lang("customer"); ?>: <?= $delivery->customer; ?></div></td>
<td><div class="col-xs-19 text-right"><?= lang("sale_reference_no"); ?>: <?= $delivery->sale_reference_no; ?></div></td>
</tr>
<tr>
<td><div class="col-xs-19 text-left"><?= lang("address"); ?>: <?= $delivery->address; ?></div></td>
<td><div class="col-xs-19 text-right"><?= lang("do_reference_no"); ?>: <?= $delivery->do_reference_no; ?></div></td>
</tr>
<tr>
<td><div class="col-xs-19 text-left"></div></td>
<td><div class="col-xs-19 text-right"><?= lang("Estimated Delivery Date"); ?>: <?= $this->sma->hrld($delivery->date); ?></div></td>
</tr>
<tr>
<td><div class="col-xs-19 text-left"></div></td>
<td><div class="col-xs-19 text-right"><?= lang("status"); ?>: <?= $delivery->status; ?></div></td>
</tr>
<tr>
<td><div class="col-xs-19 text-left"></div></td>
<td><div class="col-xs-19 text-right"><?= lang("Staff Name"); ?>: <?= $user->first_name . ' ' . $user->last_name; ?></div></td>
</tr>
</tbody>
</table>
</div>
<h3><?= lang("items"); ?></h3>
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped" >
<thead >
<tr>
<th style="text-align:center; vertical-align:middle;"><?= lang("no"); ?></th>
<th style="vertical-align:middle;"><?= lang("description"); ?></th>
<th style="text-align:center; vertical-align:middle;"><?= lang("quantity"); ?></th>
<th class="status_column_table"><?= lang("product_status"); ?></th>
</tr>
</thead>
<tbody>
<?php $r = 1;
foreach ($rows as $row): ?>
<tr>
<td style="text-align:center; width:40px; vertical-align:middle;"><?= $r; ?></td>
<td style="vertical-align:middle;">
<?= $row->product_code ." - " .$row->product_name .($row->variant ? ' (' . $row->variant . ')' : '');
if ($row->details) {
echo '<br><strong>' . lang("product_details") . '</strong> ' .
html_entity_decode($row->details);
}
?>
</td>
<td style="width: 150px; text-align:center; vertical-align:middle;"><?= $this->sma->formatQuantity($row->unit_quantity).' '.$row->product_unit_code; ?></td>
<td style="text-align:center; width:40px; vertical-align:middle;">
<input class = "row_id" type="hidden" name="row_id_text" value="<?= $row->product_id;?>">
<input class = "delivery_id" type="hidden" name="delivery_id_text" value="<?= $delivery->id;?>">
<div class='no-print'><input type='button' id='hideshow1' value=''></div>
<select id="edit_status_combo" name="item_status">
<option value="delivering" <?= $row->status=='delivering' ? 'selected' : '';?>>Delivering</option>
<option value="delivered" <?= $row->status=='delivered' ? 'selected' : '';?>>Delivered</option>
<option value="waiting" <?= $row->status=='waiting' ? 'selected' : '';?>>Waiting</option>
<option value="returned" <?= $row->status=='returned' ? 'selected' : '';?>>Returned</option>
<option value="wrong" <?= $row->status=='wrong' ? 'selected' : '';?>>Wrong</option>
<option value="damaged" <?= $row->status=='damaged' ? 'selected' : '';?>>Damaged</option>
<option value="missing" <?= $row->status=='missing' ? 'selected' : '';?>>Missing</option>
</select>
</td>
</tr>
<?php
$r++;
endforeach;
?>
</tbody>
</table>
</div>
<div class="table-responsive">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style = "border-collapse: collapse;" >
<tbody style="font-size: 12px !important;">
<tr>
<td width="6%"><div class="form-group pull-left"><?= lang("ccf1", "cf1"); ?>
<?php echo form_checkbox('cf1', 'cf1', $customer->cf1, 'class="form-control" id="cf1"'); ?></div></td>
<td width="6%"><div class="form-group pull-left"><?= lang("ccf2", "cf2"); ?>
<?php echo form_checkbox('cf2', 'cf2', $customer->cf2, 'class="form-control" id="cf2"'); ?></div></td>
<td width="12%"<div class="form-group pull-left"> <?= lang("ccf3", "cf3"); ?>
<?php echo form_checkbox('cf3', 'cf3', $customer->cf3, 'class="form-control" id="cf3"'); ?></div></td>
<td width="12%"><div class="form-group pull-left"><?= lang("ccf4", "cf4"); ?>
<?php echo form_checkbox('cf4', 'cf4', $customer->cf4, 'class="form-control" id="cf4"'); ?></div></td>
<td width="63%"></td>
</tr>
</tbody>
</table>
</div>
<div class="clearfix"></div>
<?php if ($delivery->note) { ?>
<div class="well well-sm">
<p class="bold" style="font-size:11px;"><?= lang("note"); ?>:</p>
<div style="font-size:11px;"><?= $this->sma->decode_html($delivery->note); ?></div>
</div>
<?php } ?>
<p class="bold" style="font-size:11px;"><?= lang("Customer Satisfaction"); ?>:</p>
<input type="text" id="txtbox123">
<br>
<br>
<div class="row">
<div class="col-xs-4 pull-left">
<p style="height:30px; font-size:11px;"><?= lang("received_by"); ?> : </p>
<hr style="height:1px;border:none;color:#333;background-color:#333;">
<p style="font-size:11px;"><?= lang("Receiver/Customer Signature"); ?></p>
</div>
<div class="col-xs-4 pull-right">
<p style="height:30px; font-size:11px;"><?= lang("delivered_by"); ?>: </p>
<hr style="height:1px;border:none;color:#333;background-color:#333;">
<p style="font-size:11px;"><?= lang("stamp_sign"); ?></p>
</div>
</div>
</div>
</div>
</div>
the jquery is at the top
how can i make it so it works each time it is generated below is a example of the select elements
as you can see the first row select element was succesfully hidden the others do not work
enter image description here

Answer 1

You could change the #edit_status_combo and add a class to the element, lets call it .edit_status_combo then you could use a .each() so:
jQuery(document).ready(function(){
jQuery('#hideshow1').on('click', function(event) {
jQuery('.edit_status_combo').each(function(){
jQuery(this).toggle('show');
});
});
});