We Keep Coding

fadeToggle() does not respect hierarchy in HTML

I'm trying to use fadeToggle () in the comments section of my blog to open the reply form to existing comments. Initially I'm using display: none in CSS to hide both the comments list and the form. The fadeIn/Out actions should be performed by clicking on the 'Reply' link. However, when I click on reply, I go straight to the top of the page and the fade effect doesn't take effect. I reviewed the hierarchy in the html to make sure that the fadeToggle function would be redirected to the correct class, but even so, something is not correct.
html
{% for comment in comments %}
<blockquote class="blockquote">
<p>{{ comment.content }}</p>
<footer class="blockquote-footer">Por: {{ comment.user }} | {{ comment.timestamp|timesince }} ago |
{% if comment.children.count > 0 %}{{ comment.children.count }} comment{% if comment.children.count > 1 %}s
{% endif %} | {% endif %}<a class="comment-reply-btn" href="#">Reply</a>
</footer>
<div class="comment-reply">
{% for child_comment in comment.children %}
<blockquote class="blockquote">
<p class="mb-0">{{ child_comment.content }}</p>
<footer class="blockquote-footer">Por: {{ child_comment.user }} |
{{ child_comment.timestamp|timesince }}
ago
</footer>
</blockquote>
{% endfor %}
{% if request.user.is_authenticated %}
<form action="" method="POST">
{% csrf_token %}
{{ comment_form|crispy }}
<input type="hidden" name="parent_id" value="{{ comment.id }}">
<input class="btn btn-secondary" type="submit" value="Reply">
</form>
{% else %}
<p>You must login to reply</p>
{% endif %}
</div>
</blockquote>
{% endfor %}
css
.comment-reply {
display: none;
}
js
<script type="text/javascript">
$(document).ready(function () {
$(".comment-reply-btn").click(function (event) {
event.preventDefault();
$(this).parent().next(".comment-reply").fadeToggle();
})
})
</script>

jQuery widgets not working for dynamically added formset forms

I have a form and a related formset in my view/template. For several fields I use widgets: Select2 and a calendar (date-picker) from django admin app.
I also use dynamic addition of formset forms.
When I render a template for the first time, all widgets work fine. But when I add new formset form, widgets of this new form don't work.
I've read existing questions on this kind of problem: 1, 2, 3, 4, but they either not applicable for me, or not helping (2 and 3), or may be I am just doing something wrong (most likely - I'm new to it).
Much appreciated for any tips.
HTML:
{% extends "docs/base.html" %}
{% load static %}
{% block extrahead %}
{{ block.super }}
{{ form_matter.media.css }}
<link href="/static/django_select2/select2.min.css" type="text/css" media="screen" rel="stylesheet">
{% endblock %}
{% block content %}
{% if mat_id == None %}
<form id="MatterForm" action="{% url 'matter_create_url' %}" enctype="multipart/form-data" method="post">
{% else %}
<form id="MatterForm" action="{% url 'matter_edit_url' mat_id=mat_id %}" enctype="multipart/form-data" method="post">
{% endif %}
{% csrf_token %}
<fieldset>
{% for field in form_matter %}
<div class="form-row">
{% if field.errors %}
<div>{{ field.errors }}</div>
{% endif %}
<label class="form-label">{{ field.label_tag }}</label>
<div class="form-input">{{ field }}</div>
</div>
{% endfor %}
<h3>RESOLUTIONS</h3>
<div id="form_set">
{{ formset_resolutions.management_form }}
{% for form in formset_resolutions %}
<div class="formset-form">
{% for hidden in form.hidden_fields %}
{{ hidden }}
{% endfor %}
{% for field in form.visible_fields %}
<div class="form-row">
{% if field.errors %}
<div>{{ field.errors }}</div>
{% endif %}
<label class="form-label">{{ field.label_tag }}</label>
<div class="form-input">{{ field }}</div>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</fieldset>
<br>
<button class="btn" type="button" id="add_form" style="margin: 0 0 0 25px">ADD</button>
<button class="btn" type="submit" style="margin: 0 0 0 25px">SAVE</button>
<br><br><br>
<div id="empty_form" style="display:none">
<div class="formset-form">
{% for field in formset_resolutions.empty_form.visible_fields %}
<div class="form-row">
{% if field.errors %}
<div>{{ field.errors }}</div>
{% endif %}
<label class="form-label">{{ field.label_tag }}</label>
<div class="form-input">{{ field }}</div>
</div>
{% endfor %}
</div>
</div>
</form>
<script type="text/javascript">window.__admin_media_prefix__ = "{% static 'admin/' %}";</script>
<script type="text/javascript" src="/jsi18n/"></script>
<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript" src="/static/django_select2/select2.min.js"></script>
<script>
$('#add_form').on('click', function() {
var form_idx = $('#id_resolution_set-TOTAL_FORMS').val();
$('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx));
$('#id_resolution_set-TOTAL_FORMS').val(parseInt(form_idx) + 1);
});
</script>
<script>$('div.form-row:has(label.form-label:has(label[for$="-DELETE"]))').css('background-color', '#ffc7c7')</script>
{{ form_matter.media.js }}
{% endblock content %}

Shopify - Change opacity sold out product's thumbnail

I would like to have an opacity applied to the thumbnail when an article is sold out, is it possible?
<div class="product-details">
{% if settings.display_vendor %}
<span itemprop="brand" class="brand">{{ product.vendor }}</span>
{% endif %}
<span class="title" itemprop="name">{{ product.title }}</span>
{% if collection_handles contains 'coming-soon' %}
<span class="modal_price">{{ 'collections.general.coming_soon' | t }}</span>
{% else %}
<span class="price {% if product.compare_at_price_max > product.price %}sale{% endif %}">
{% if product.available %}
{% if product.price_varies and product.price_min > 0 %}
<small><em>{{ 'products.general.from' | t }}</em></small>
{% endif %}
{% if product.price_min > 0 %}
<span class="money">{{ product.price_min | money }}</span>
{% else %}
{{ settings.free_price_text }}
{% endif %}
{% else %}
<span class="sold_out">UH OH, WE’RE OUT</span>
{% endif %}
{% if product.compare_at_price_max > product.price %}
<span class="was_price">
<span class="money">{{ product.compare_at_price_max | money }}</span>
</span>
{% endif %}
</span>
{% endif %}
{% if settings.enable_shopify_collection_badges and settings.enable_shopify_review_comments %}
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
{% endif %}
</div>
Thank you so much for your help.

jquery - not able to replace siblings div with id or class

I have this jQuery script that I do not fully understand. I was wondering why I cannot replace the siblings('div') with a class or id? I think my code doesn't work properly. What I was trying to do is replace some content with a button click, and then the second content, replace it again with the second function.
<script>
$(document).ready(function () {
$('.btnClick').on('click', function () {
var faculty_id = $(this).attr('id');
$('#' + faculty_id + '_tab').show().siblings('div').hide();
});
$('.btnClick2').on('click', function () {
var department_id = $(this).attr('id');
$('#' + department_id + '_tab').show().siblings('div').hide();
});
});
</script>
<div class="row">
<div class="col-md-3">
<div class="jumbotron">
<h4>Search courses</h4>
<hr>
<br>
<ul>
{% for faculty in faculties %}
<li class="btnClick" id="fac_{{ faculty.pk }}">{{ faculty.name }}</li>
<ul>
{% for department in faculty.department_set.all %}
<li class="btnClick2" id="dep_{{ department.pk }}">{{ department.name }}</li>
<ul>
{% for study in studies %}
{% if study.department == department %}
<li>{{ study.name }}</li>
{% endif %}
{% endfor %}
</ul>
{% endfor %}
</ul>
{% endfor %}
</ul>
</div>
</div>
<div class="col-md-9">
<div class="jumbotron">
<div>
<h3>All courses</h3>
<ul>
{% for course in courses %}
<li>
<a class="first" href={{ course.slug }}>{{ course.name }}</a>
</li>
{% endfor %}
</ul>
</div>
{% for faculty in faculties %}
<div id="fac_{{ faculty.pk }}_tab" style="display:none;">
<h3> {{ faculty.name }} courses</h3>
<ul>
{% for department in faculty.department_set.all %}
{% for study in studies %}
{% if study.department == department %}
{% for course in courses %}
{% if course.study_programme == study %}
<li>
<a class="first"
href={{ course.slug }}>{{ course.name }}</a>
</li>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
{% endfor %}
</ul>
</div>
{% endfor %}
{% for faculty in faculties %}
<ul>
{% for department in faculty.department_set.all %}
<div id="dep_{{ department.pk }}_tab" style="display:none;">
<h3>Department of {{ department.name }} courses</h3>
<ul>
{% for study in studies %}
{% if study.department == department %}
{% for course in courses %}
{% if course.study_programme == study %}
<li>
<a class="first"
href={{ course.slug }}>{{ course.name }}</a>
</li>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</ul>
</div>
{% endfor %}
</ul>
{% endfor %}
</div>
</div>
</div>
</div>

Django admin add view popup dialog box

How can I pass in an extra GET parameter in the add view popup box in the Django admin?
Basically I have a + sign in a foreign key, and when I click on it, it opens a popup box to add a new object of that type.
The problem is that I am using some custom Ajax code in the popup box, and I need to find a way to update only the field that is opened the dialog box (assuming there might be other foreign key fields).
The only solution I can think of is to somehow pass in a GET parameter so that I know which field should be updated.
Any ideas? I just need a push in the right direction in order to complete this
Right now I am doing something like this to update the field. and I want to make this dynamic
if ($('#id_avatar').length) {
$('#id_avatar', opener.document).append($('<option selected="selected"></option>').attr('value', data.obj_id).text(data.obj__unicode__));
}
I guess I somehow reloading the select box in the original page could be an option since at this point its already saved in the database.

I ended up overriding the fieldsets in change_form.html. not sure if its the best approach but it seems to be working for me.
Now i can pass a source_field to know what field called the popup so i can later updated the proper field with Jquery
{% for fieldset in adminform %}
{# {% include "admin/includes/fieldset.html" %}#}
<fieldset class="module aligned {{ fieldset.classes }}">
{% if fieldset.name %}<h2>{{ fieldset.name }}</h2>{% endif %}
{% if fieldset.description %}
<div class="description">{{ fieldset.description|safe }}</div>
{% endif %}
{% for line in fieldset %}
<div class="form-row{% if line.fields|length_is:'1' and line.errors %} errors{% endif %}{% if not line.has_visible_field %} hidden{% endif %}{% for field in line %}{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% endfor %}">
{% if line.fields|length_is:'1' %}{{ line.errors }}{% endif %}
{% for field in line %}
<div{% if not line.fields|length_is:'1' %} class="field-box{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% if not field.is_readonly and field.errors %} errors{% endif %}{% if field.field.is_hidden %} hidden{% endif %}"{% elif field.is_checkbox %} class="checkbox-row"{% endif %}>
{% if not line.fields|length_is:'1' and not field.is_readonly %}{{ field.errors }}{% endif %}
{% if field.is_checkbox %}
{{ field.field }}{{ field.label_tag }}
{% else %}
{{ field.label_tag }}
{% if field.is_readonly %}
<p>{{ field.contents }}</p>
{% else %}
{% if field.field.name == 'avatar' %}
<select id="id_avatar" name="avatar">
<option value="" selected="selected">---------</option>
</select> <img src="/static/admin/img/icon_addlink.gif" width="10" height="10" alt="Add Another">
{% else %}
{{ field.field }}
{% endif %}
{% endif %}
{% endif %}
{% if field.field.help_text %}
<p class="help">{{ field.field.help_text|safe }}</p>
{% endif %}
</div>
{% endfor %}
</div>
{% endfor %}
</fieldset>
{% endfor %}