Pass jquery variable to bootstrap modal select - php

Question

First of all, i want you to know that i'm a beginner, (please be kind) and i first searched for a solution but couldn't find.
I'm trying to build a blog using an php mvc framework. In this moment, when i want to edit an article, i'm redirecting to a new page and do there the work, but i want to switch to jquery (or javascript) and i'm stuck to selecting the article category from the select menu. I have an twig global variable containing all the categories (for the navigation). This is my code so far:
JS:
$('#editModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var title = button.data('title')
var category = button.data('category')
var body = button.data('body')
var modal = $(this)
modal.find('#title').val(title)
modal.find('#article-id').val(button.data('id'))
modal.find('#category').val(category)
modal.find('#body').val(body)
});
Modal:
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Changed your mind? Paste your thoughts!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form class="form" method="post" action="/adminzone/articles/update" id="formEditArticle">
<div class="modal-body">
<input id="article-id" name="id" type="hidden" value={{article.id}} />
<div class="form-group">
<label for="title">Title</label>
<input id="title" class="form-control" name="title" placeholder="Title" value="{{ article.title }}" autofocus required pattern=".{2,80}" title="The title must have at least 2 characters and maximim 80."/>
</div>
<div class="form-group">
<label for="category">Category</label>
<select id="category" class="form-control" name="category" required>
{% for category in categories %}
<option value="{{ category.id }}" {% if category.id == article.category %} selected="selected" {% endif %}>{{ category.name }}</option>
{% endfor %}
</select>
</div>
<div class="form-group">
<label for="body">Body</label>
<textarea id="body" class="form-control" name="body" placeholder="Paste here your ideas..." required minlength="20" rows=10>{{ article.body }}</textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-lg btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-lg btn-primary mr-5"><i class="fa fa-lg fa-save"></i> Spreat the word!</button>
</div>
</div>
</form>
</div>
</div>
</div>
The button: