Not able to reset the input field jquery php wordpress - php

Question

I need to reset the field onclick of reset button
But I am not able to do that.
Here is my html code
<table cellspacing="2" cellpadding="5" style="width: 100%;" class="form-table1" id="form-table1" >
<tbody>
<tr class="form-field1">
<th valign="top" scope="row">
<label for="approved_mailCc"><?php _e('OpenLab Cc', 'custom_table_example')?></label>
</th>
<td>
<input id="approved_mailCc" name="approved_mailCc" type="email" value="<?php echo isset($item['approved_mailCc']) ? $item['approved_mailCc'] : ''; ?>"
size="50" class="code" placeholder="<?php _e('OpenLab Cc', 'custom_table_example')?>" required />
<input type="button" value="Reset" id="approved_mailCc" name="openLab"/>
</td>
</tr>
jQuery code
jQuery(document).ready(function($){
console.log("plugin script loaded2");
$('#approved_mailCc').click(function(){
$(this).val('');
});
});
1 I am getting console log.
2 alert is not going inside onclick
3 i used reset function also.

Answer 1

You have two inputs with the same ID of "approved_mailCc" you can't have more than one item with the same ID, it will confuse jQuery. Give them unique IDs like below:
<table cellspacing="2" cellpadding="5" style="width: 100%;" class="form-table1" id="form-table1" >
<tbody>
<tr class="form-field1">
<th valign="top" scope="row">
<label for="approved_mailCc"><?php _e('OpenLab Cc', 'custom_table_example')?></label>
</th>
<td>
<input id="approved_mailCc_email" name="approved_mailCc" type="email" value="<?php echo isset($item['approved_mailCc']) ? $item['approved_mailCc'] : ''; ?>"
size="50" class="code" placeholder="<?php _e('OpenLab Cc', 'custom_table_example')?>" required />
<input type="button" value="Reset" id="approved_mailCc_button" name="openLab"/>
</td>
</tr>
and then use this jQuery code:
jQuery(document).ready(function(){
console.log("plugin script loaded2");
jQuery('#approved_mailCc_button').click(function(){
jQuery('#approved_mailCc_button_email').val('');
});

Answer 2

First, you are not supposed to need Javascript to reset a form (but you need the tag) :
https://jsfiddle.net/9xfonyou/
Second, there are errors on your code double IDs.
Here "approved_mailCc" is both your input file and your button. Then you can do this in Javascript to make it work.
HTML :
<form>
<table cellspacing="2" cellpadding="5" style="width: 100%;" class="form-table1" id="form-table1">
<tbody>
<tr class="form-field1">
<th valign="top" scope="row">
<label for="approved_mailCc"></label>
</th>
<td>
<input id="input_field" name="approved_mailCc" type="email" value="" size="50" class="code" placeholder="test" required />
<input type="reset" id="reset_button" name="openLab" />
</td>
</tr>
</tbody>
</table>
</form>
JS :
jQuery(document).ready(function($) {
console.log("plugin script loaded2");
$('#reset_button').click(function(e) {
e.preventDefault();
$('#input_field').val('');
});
});
https://jsfiddle.net/9xfonyou/1/