Viacheslav Gordeiko

Вы неправильно считаете.
392.12 может получиться, если цена будет 98.03. Т.е. 3 копейки, а в примере у вас указано 30 копеек.

Можно с помощью JS:

Главный совет - JavaScript. От начала до конца со всеми тонкостями.
После этого сами полуметре как и куда двигаться дальше.

const links = document.querySelectorAll('.link-to-search');
links.forEach((link) => link.addEventListener('click', (e) => {
	document.querySelector('input.searcher-inp').value = e.target.textContent;
	document.querySelector('form').submit();
}))

С помощью тега <form>

Нужно чтобы тег img представлялся в DOM как svg, это можно сделать с помощью JS/jQuery.
Вставь это в свой JS:

jQuery('img.img-svg').each(function(){
  const $img = jQuery(this);
  const imgClass = $img.attr('class');
  const imgURL = $img.attr('src');
  jQuery.get(imgURL, function(data) {
    let $svg = jQuery(data).find('svg');
    if(typeof imgClass !== 'undefined') {
      $svg = $svg.attr('class', imgClass+' replaced-svg');
    }
    $svg = $svg.removeAttr('xmlns:a');
    if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
      $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
    }
    $img.replaceWith($svg);
  }, 'xml');
});

* Если jQuery определен как $, то естественно в коде заменить "jQuery" на "$".

Добавь класс тегу img:
<img src="test.svg" alt="" class="img-svg" />
После чего можно настраивать цвет и остальные параметры:

.img-svg {
     max-width: 30px;
}
 .img-svg path {
     fill: #535353;
}

Как вариант - хранить формы отдельными компонентами. При выборе "Запрос 1" или "Запрос 2" и т.д. менять состояние. Ну и в зависимости от текущего состояния рендерить нужную форму.