JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" ><input id="button_1" type="button" value="add" >
<input type="text"> <input id="button_2" type="button" value="add">

JavaScript

$('[id^="button_"]').on("click", "input", function() {
    $(this).val("delete");
    
    $('#button_'+$(this).attr('id').split('_')[1]).attr('id', 'delButton_'+$(this).attr('id').split[1]);
                                                     
});

$('[id^="delButton_"]').on("click", "input", function() {
    $(this).val("add");
    
    $('#delButton_'+$(this).attr('id').split('_')[1]).attr('id', 'button_'+$(this).attr('id').split[1]);
    
});