Save Edit button then disabled readonly metabox - php

Question

Hello I am just starting out with php and I have managed to get a repeatable metabox and managed to add a 'Save' button which saves the input meta data to the database which works, how can I change the fields to disabled readonly when the 'Save' button is pressed, and then the 'Save' button becomes 'Edit' which when pressed the fields are editable and the button becomes 'Save'? any help will be appreciated
metabox
add_action( 'wp_ajax_handle_Inventory_in_db', 'handle_Inventory_in_db' );
function mdr_add_meta_boxes() {
add_meta_box( 'mdrinventory-group', 'Inventory', 'Repeatable_meta_box_display', 'rvs_video', 'normal', 'high');
}
function Repeatable_meta_box_display() {
global $post;
global $wpdb;
$sql="SELECT * FROM $wpdb->postmeta WHERE post_id = '".$post->ID."' AND meta_key='inventory_group'";
$allData = $wpdb->get_results($wpdb->prepare($sql));
wp_nonce_field( 'mdr_repeatable_meta_box_nonce', 'mdr_repeatable_meta_box_nonce' );
?>
<script type="text/javascript">
jQuery(document).ready(function( $ ){
$( '#add-row' ).on('click', function() {
var row='';
var data = {
'post_id':'<?=$post->ID?>',
'action': 'handle_Inventory_in_db',
'command': 'add_new_blank_row_in_db',
}
$.post(ajaxurl, data, function(resp){
row=resp;
$('#dynamic-rows').append(row);
});
return false;
});
$('body' ).on('click','.update-row',function() {
var meta_id=$(this).attr('data-uid');
var data = {
'meta_id': meta_id,
'serial': $("#serial_"+meta_id).val(),
'barcode':$("#barcode_"+meta_id).val(),
'action': 'handle_Inventory_in_db',
'command': 'update_row',
}
$.post(ajaxurl, data, function(resp){
console.log(resp);
});
$(this).val('Update');
return false;
});
$('body' ).on('click','.remove-row',function() {
var meta_id=$(this).attr('data-uid');
var data = {
'meta_id': meta_id,
'action': 'handle_Inventory_in_db',
'command': 'remove_row',
}
$.post(ajaxurl, data, function(resp){
console.log(resp);
});
$(this).parents('tr').remove();
return false;
});
});
</script>
<table id="repeatable-fieldset-one" width="100%" class="wp-list-table widefat fixed striped table-view-list">
<thead>
<tr>
<th>Serial No.</th>
<th>Barcode No.</th>
</tr>
</thead>
<tbody id="dynamic-rows">
<?php
if ( $allData ) :
foreach ($allData as $singleRow) {
$save_btn_label= $singleRow->meta_value==''?'Save':'Update';
$meta_value = unserialize( $singleRow->meta_value);
?>
<tr>
<td width="15%"><input type="text" id="serial_<?=$singleRow->meta_id;?>" placeholder="Serial" onkeyup="this.value = this.value.toUpperCase();" value="<?php if($meta_value['serial'] != '') echo esc_attr($meta_value['serial']); ?>" /></td>
<td width="70%"><input type="text" id="barcode_<?=$singleRow->meta_id;?>" placeholder="Barcode" value="<?php if($meta_value['barcode'] != '') echo esc_attr($meta_value['barcode']); ?>" /></td>
<td width="15%"><input data-uid="<?=$singleRow->meta_id;?>" type="button" class="update-row mdr_bk_btn1" value="<?=$save_btn_label;?>"></td>
<td width="15%"><a data-uid="<?=$singleRow->meta_id;?>" class="button remove-row" href="#1">Remove</a></td>
</tr>
<?php
}
else :
// insert a blank row
$meta_id=add_post_meta( $post->ID, 'inventory_group', '', false ); //Add new meta to table and store id in $uid
?>
<tr>
<td width="15%"><input type="text" id="serial_<?=$meta_id;?>" placeholder="Serial" onkeyup="this.value = this.value.toUpperCase();"/></td>
<td width="70%"><input type="text" id="barcode_<?=$meta_id;?>" placeholder="Barcode"/></td>
<td width="15%"><input data-uid="<?=$meta_id;?>" type="button" class="update-row mdr_bk_btn1" value="Save"></td>
<td width="15%"><a data-uid="<?=$meta_id;?>" class="button remove-row" href="#1">Remove</a></td>
</tr>
<?php endif; ?>
</tbody>
</table>
<p><a id="add-row" class="button" href="#">Add Inventory</a></p>
<?php
}
function handle_Inventory_in_db()
{
global $wpdb;
$table_name = $wpdb->prefix . 'postmeta';
$conditions = array( 'meta_id' => $_POST['meta_id'] );
switch ($_POST['command']) {
case 'add_new_blank_row_in_db':
$meta_id=add_post_meta( $_POST['post_id'], 'inventory_group', null, false );
$row='<tr>
<td width="15%"><input type="text" id="serial_'.$meta_id.'" placeholder="Serial" onkeyup="this.value = this.value.toUpperCase();"/></td>
<td width="70%"><input type="text" id="barcode_'.$meta_id.'" placeholder="Barcode"/></td>
<td width="15%"><input data-uid="'.$meta_id.'" type="button" class="update-row mdr_bk_btn1" value="Save"></td>
<td width="15%"><a data-uid="'.$meta_id.'" class="button remove-row" href="#1">Remove</a></td>
</tr>';
echo $row;
break;
case 'update_row':
$serial=$_POST['serial'];
$barcode=$_POST['barcode'];
$meta_value=serialize(array('serial'=> $serial,'barcode'=>$barcode));
$data=array(
'meta_value'=>$meta_value,
);
$result = $wpdb->update( $table_name,$data, $conditions );
echo $response=$result?"The row successfully updated":"There was an error updating the row";
break;
case 'remove_row':
$result = $wpdb->delete( $table_name, $conditions );
echo $response=$result?"The row successfully deleted":"There was an error deleting the row";
break;
default:
echo "Silence is golden";
break;
}
wp_die();
} ``