How to Call the Same Method for Different Elements With Different Ids

function add(id) {    var element = document.getElementById(id),        value = +element.value || 0;
    element.value = value + 1;}
function sub(id) {    var element = document.getElementById(id),        value = +element.value || 0;
    value--;    if (value < 0) {        value = 0;    }    element.value = value;}

<div class="range">  <label>Book</label>  <a href="#" onClick="sub('book')"><i class="fa fa-minus-circle" aria-hidden="true">-</i></a><input type="text" id="book" value="0" min="0">  <a href="#" onClick="add('book')"><i class="fa fa-plus-circle" aria-hidden="true">+</i></a></div>
<div class="range">  <label>Pen</label>  <a href="#" onClick="sub('pen')"><i class="fa fa-minus-circle" aria-hidden="true">-</i></a><input type="text" id="pen" value="0" min="0">  <a href="#" onClick="add('pen')"> <i class="fa fa-plus-circle" aria-hidden="true">+</i></a></div>

How to handle multiple elements with the same ID in HTML/AJAX/DJANGO?

With respect to what you described (I don't know how you are loading your post), the following is how I do it :

views(where you are loading your posts)

def forms(request):
    posts = Post.objects.all()
    return render(request, 'posts.html', {'posts': posts})

posts.html

{% for post in posts %}
    <div post-id="{{ post.pk }}">
       // load other parts
    </div> 
{% endfor %}

jquery part

$(".your-selector").click(function () {
        var post = $(this).attr('post-id');
        $.ajax({
            url: '/your-url/',
            data: {
                'post': post,
                ....
                },
            type: 'post',
            cache: false,
            success: function (data) {
                  // do stuff on success
                },
        });
    });

Now you are loading posts and every div has its own id, now you can do it in one page. I think this can solve the problem, do remember this that you need to change your js to get post-id.

jquery multiple ids same function

You could use the "attribute starts-with" selector:

$(function() {
    $("input[id^='datepicker']").datepicker({
        showButtonPanel: true
    });
});

That selector will match any input element whose id value starts with "datepicker". An alternative would be to give all the required elements a common class.

You can also select multiple elements by id using a comma-separated list:

$("#datepicker0, #datepicker1, #datepicker2"); //List as many as necessary

But that's not particularly scalable if you ever need to add more inputs.

How to use multiple IDs in one function

You can use a more general selector: $('[id^="more"]').
This will select all items that have an id that starts with "more", and will have a click event tied to them.

Then you can use the number in the id property and use it to build the id of the target.

$('[id^="more"]').click(function()
{
    let id = $(this).attr('id');
    let num = /\d+/.exec(id)[0];
    $('#details' + num).slideToggle();                  
});

$(document).ready(function()
{
    $('[id^="more"]').click(function()
    {
        let id = $(this).attr('id');
        let num = /\d+/.exec(id)[0];
        $('#details' + num).slideToggle();                  
    });    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <button id="more1">One</button>
  <span id="details1">Each Section</span>
</div>
<div>
  <button id="more2">Two</button>
  <span id="details2">Is Independent</span>
</div>
<div>...</div>
<div>
  <button id="more25">Twenty Five</button>
  <span id="details25">Of all the others</span>
</div>

$(function() {
   $('.box').each(function() {
      var boxId = $(this).attr("id");
      var image = $('#' + boxId + ' > a ').attr("id");
      $('#' + boxId).css({"background":"url(" + image + ".jpg)","background-size":"contain"});
   });
});