Автоматическое заполнение полей в зависимости от выбранного значения в списке шаблона django

Пожалуйста, помогите сделать автоматическое заполнение полей (компания/ревизия) в зависимости от выбранного значения в списке (проект), например если будет выбран "PROJECT2" в раскрывающемся списке, то значение "02" будет в поле "Revision", а значение "COMPANY2" будет в поле "Company", картинка:

Что сделал: models.py в моделях создал проекты "PROJ" (имя проекта "project_id", имя компании "Company", номер ревизии "Revision")

class PROJ(models.Model):
    User=get_user_model()
    author = models.ForeignKey(User, on_delete=models.CASCADE)
    project_id=models.CharField(max_length=100, null=True, blank=True, db_index=True)
    Company=models.CharField(max_length=100, null=True, blank=True)
    Revision=models.CharField(max_length=100, null=True, blank=True)

далее urls.py

urlpatterns = [ path('software/', views.software, name='software'), 

вариант 1 в шаблоне software.html сделал цикл {% for PROJ in PROJS %} - выводит все проекты в список, а далее цикл {% for PROJ in PROJS %} и условие {% if PROJ.id == 2 %} работает только в ручную при замене цифры 2

<label class="col-md-3 col-form-label">Project/Site:</label>
<div class="col-md-9">
<select class="form-select" name="proj_number" id="proj_number">
{% for PROJ in PROJS %}
<option value="{{ PROJ.id }}">{{ PROJ.id }}</option>
{% endfor %}
</select>
</div>
{% for PROJ in PROJS %}
{% if PROJ.id == 2 %}
<label class="col-md-3 col-form-label">Revision:</label>
<div class="col-md-9">
<input type="text" class="form-control" name="Revision" placeholder="Revision" id="Revision" value="{{PROJ.Revision}}">
</div>
<label class="col-md-3 col-form-label">Company:</label>
<div class="col-md-9">
<input type="text" class="form-control" name="Company" placeholder="Company" id="Company" value="{{PROJ.Company}}">
</div>
</div>
{% endif %}
{% endfor %}

Решение необходимо в условии if цифру 2 привязать к значению id выбранного проекта из списка PROJ.id select class="form-select" name="proj_number" id="proj_number" напрямую в шаблоне или через скрипт

вариант 2 в условии if сделал проверку на id выбранного проекта из списка {% if PROJ.id == "proj_number" %} напрямую в шаблоне - не работает

<label class="col-md-3 col-form-label">Project/Site:</label>
<div class="col-md-9">
<select class="form-select" name="proj_number" id="proj_number">
{% for PROJ in PROJS %}
<option value="{{ PROJ.id }}">{{ PROJ.id }}</option>
{% endfor %}
</select>
</div>
{% for PROJ in PROJS %}
{% if PROJ.id == "proj_number" %}
<label class="col-md-3 col-form-label">Revision:</label>
<div class="col-md-9">
<input type="text" class="form-control" name="Revision" placeholder="Revision" id="Revision" value="{{PROJ.Revision}}">
</div>
<label class="col-md-3 col-form-label">Company:</label>
<div class="col-md-9">
<input type="text" class="form-control" name="Company" placeholder="Company" id="Company" value="{{PROJ.Company}}">
</div>
</div>
{% endif %}
{% endfor %}

вариант 3 скрипт с получением значения id выбранного проекта из списка PROJ.id и отправкой обратно в шаблон, но в условии if в шаблоне переменная скрипта не работает

<script>
var proj_number = document.getElementById("proj_number").value;
document.getElementById('proj_number1').value = proj_number;
</script>
<label class="col-md-3 col-form-label">Project/Site:</label>
<div class="col-md-9">
<select class="form-select" name="proj_number" id="proj_number">
{% for PROJ in PROJS %}
<option value="{{ PROJ.id }}">{{ PROJ.id }}</option>
{% endfor %}
</select>
</div>
{% for PROJ in PROJS %}
{% if PROJ.id == "proj_number1" %}
<label class="col-md-3 col-form-label">Revision:</label>
<div class="col-md-9">
<input type="text" class="form-control" name="Revision" placeholder="Revision" id="Revision" value="{{PROJ.Revision}}">
</div>
<label class="col-md-3 col-form-label">Company:</label>
<div class="col-md-9">
<input type="text" class="form-control" name="Company" placeholder="Company" id="Company" value="{{PROJ.Company}}">
</div>
</div>
{% endif %}
{% endfor %}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

def software(request):
assert isinstance(request, HttpRequest)
PROJS = PROJ.objects.filter(author=request.user)
return render(
request,
'app/software.html',
{
'PROJS': PROJS,
 'PROJSvalues': list(PROJ.objects.values('id', 'project_id', 'Company', 'Revision', 'SSI' ))
}
)

<div class="col-md-9">
<select class="form-select" name="proj_number" id="proj_number" onchange="PROJ_ID(this)">
{% for PROJ in PROJS %}
<option value="{{ PROJ.id }}">{{ PROJ.project_id }}</option>
{% endfor %}
</select>
</div>
{{ PROJSvalues|json_script:"proj-json" }}    
<script>
let jsondata = JSON.parse(document.getElementById('proj-json').textContent);
//console.log(jsondata);
function PROJ_ID() {
var proj_number = parseFloat(document.getElementById("proj_number").value);
//alert(proj_number);
const result = jsondata.find(({ id }) => id === proj_number);
//console.log(result);
document.getElementById('Revision').value = result['Revision'];
document.getElementById('Company').value = result['Company'];
document.getElementById('SSI').value = result['SSI'];
}
</script>
<label class="col-md-3 col-form-label">Revision:</label>
<div class="col-md-9">
<input type="text" class="form-control" name="Revision" placeholder="Revision" id="Revision">
</div>
<label class="col-md-3 col-form-label">Company:</label>
<div class="col-md-9">
<input type="text" class="form-control" name="Company" placeholder="Company" id="Company">
</div>