JSFiddle - React, Tailwind, and code Playground

by Sree K

HTML

<!-- P.S: I changed data-panel="infopanel" to data-panel="basicinfopanel" to make it consistent with other divs -->
<div class="ap-create-story-panel-wrap" data-panel="basicinfopanel">
  <input type="text">
</div>
<a class="btn-basicinfopanel" data-target="certificatepanel">Save/Next</a>

<div class="ap-create-story-panel-wrap" data-panel="certifypanel">
  <input type="text">
</div>
<a class="btn-certifypanel" data-target="certifypanel">Save/Next</a>

<div class="ap-create-story-panel-wrap" data-panel="photopanel">
  <input type="text">
</div>
<a class="btn-photopanel" data-target="photopanel">Save/Next</a>

JavaScript

$(document).ready(function() {
    // Record original value of each input. We will use it to compare with actual value later
    $('div.ap-create-story-panel-wrap input').each(function() {
        $(this).data('old', $(this).val());
    });
    
    // Listen to mouse click anywhere except input
    $(document).mouseup(function(e) {        
        // Check which input value changed
        $('div.ap-create-story-panel-wrap input').each(function() {
            let ov = $(this).data('old');
            let nv = $(this).val();
            
            if(nv != ov) {
                console.log('previous value: ',ov || "empty field");
                console.log('present value: ',nv || "empty field");
                
                // Trigger click on its btn
                let tgt = $(this).closest('div.ap-create-story-panel-wrap').data('panel');
                
                console.log('change detected in ', tgt);
                
                let bCls = '.btn-'+tgt;   // btn class
                $(bCls).trigger('click');

                // Update data-old to new value to prepare for any further change detection
                $(this).data('old', $(this).val());
            }
        });
    });
    
    $('div.ap-create-story-panel-wrap').on('click', function(e) {
      e.stopPropagation();
      return false;
    });

    // Added only for demo, not needed in actual code
    $('a').on('click', function() {
        console.log('Target on clicked button: ', $(this).data('target'));
    });
});