Alignment of autocomplete and live data update script

Question

I have a custom opencart price update module. I would like to extend this with new functionality. (This is a module that can update the same data. When you click on a value and change it, it will be automatically updated in the database.)

Here is my problem.

So far everything works fine (data entry, data saving and storing in the database and reading it back.)

When I turn on the autocomplete function. Entering keywords and displaying results works perfectly. But when I click on it then the other script does not detect value. and so no data is saved.

Twig file: Autocomplete input and data change input:

<td class="text-center td-j priceupdate-id product-data" data-theme="priceupdate-id">
                            
                            <span class="label label{{ product.product_id }} label-priceupdate-id td-text">{{ product.priceupdate }}</span>
                            <span class="hidden{{ product.product_id }} priceupdate-id hidden">{{ product.priceupdate_id }}</span>
                            <div class="edit priceupdate-id">
                                <input type="text" name="priceupdate-id" value="{{ product.priceupdate_id }}" class="form-control value{{ product.product_id }}">
                                <a href="#" data-id="{{ product.product_id }}" name="test" class="test">
                                    <i class="fa-save fa"></i>
                                </a>

                              <script type="text/javascript">
                              $('.value' + {{ product.product_id }}).autocomplete({
                                  'source': function(request, response) {
                                      $.ajax({
                                          url: 'index.php?route=catalog/product/priceupdate_autocomplete&user_token={{ user_token }}&filter_name=' + encodeURIComponent(request),
                                          dataType: 'json',
                                          success: function(json) {
                                              response($.map(json, function(item) {
                                                  return {
                                                      label: item['name'],
                                                      value: item['priceupdate_id']
                                                  }
                                              }));
                                          }
                                      });
                                  },
                                  'select': function(item) {
                                      $('.label' + {{ product.product_id }}).text(item['label']);
                                      $('.hidden' + {{ product.product_id }}).text(item['value']);
                                      $('.value' + {{ product.product_id }}).val(item['value']);
                                  }
                              });
                            </script>

                            </div>
                            <div class="responsive-loader loader-table">
                                <i class="spinner"></i>
                                <div class="loader-text">{{ text_loading }}</div>
                            </div>
                        </td>

Data save javascript: A javascript that runs when the input field is changed, which saves the data in the database.

$('.edit select, .edit input').change(function(e) {
      var self = $(this).siblings('a.test'),
      loading = $(self).parent('.edit').next('.responsive-loader'),
        id = $(self).data('id'),
        type = $(self).parents('tr').data('type'),
        value = '',
        product_id = $(self).parents('tr').data('product-id'),
        theme = $(self).parents('td').data('theme');

      $('.SA_alert').remove();
      $.ajax({
        type: "POST",
        url: 'index.php?route=extension/module/shortcut_products/update&user_token={{ user_token }}',
        data:{product_id:product_id, id:id, value:value, theme:theme, type:type},
        beforeSend: function() {
          $(loading).addClass('show');
        },
        success: function(json) {
            console.log(json);
          if (json['success']) {

            if (theme === 'priceupdate-id') {
              var text_ja = $(loading).siblings('.label.td-text');
              value = $(self).prev('input').val();
              $(text_ja).text(value);
              
                text_ja.removeClass('label-warning');
                text_ja.addClass('label-priceupdate-id');
                text_ja.removeClass('label-danger');
                
                var priceupdate = json['replace']['name'];
                var priceupdate_id = json['replace']['priceupdate_id'];

                var tr = $('tr[data-product-id="'+product_id+'"]');
                var td = $(tr).find('td.priceupdate-id.product-data');
                
                $(td).find('.label-priceupdate-id.td-text').text(priceupdate);
                $(td).find('.priceupdate-id.hidden').text(priceupdate_id);
            }

            $(loading).after('<p class="alert SA_alert alert-success">'+json['success']+'</p>');
          } else if(json['error']) {
             $(loading).after('<p class="alert SA_alert alert-danger">'+json['error']+'</p>');
          }
          $(loading).removeClass('show');
          $(loading).parents('td').removeClass('open');
        },
        error: function(html, ajaxOptions, thrownError) {
          console.log(thrownError + "\r\n" + html.statusText + "\r\n" + html.responseText);
        } 
      });
  });

Please help me how I can make it so that when I select the autocompete hit it will detect the data value. and the other scipt will save the data. The second script should stay because there are other data that it saves. I've just removed it to show only the essential part.

I have tried many different solutions. Directly change the value.... Unfortunately I don't know javascript.