Displaying diffrerent data from JSON in two separate tabs - ajax

Question

I've got two tabs, which have to display data from different films using rotten tomatoes API. My tabs #tab4 and #tab5 have data attributes which contains film id number, like this:
<a href="#" rel="tabs4" id="tab4" data-movie-id="770672122">
Then I got this code, which adds same class to both tabs and $(this) is supposed to show which data attribute should be taken when tab is clicked.
$("#tab4, #tab5").addClass("tab");
$('.tab').click(function(){
var filmID = $(this).attr("data-movie-id");
Then, using this var, I make url in ajax request:
$.ajax ({
dataType: "jsonp",
url: "http://api.rottentomatoes.com/api/public/v1.0/movies/" + filmID + ".json?apikey=[your_api_key]",
success: dataHandler,
crossDomain: true
});
Problem is that only #tab4 content is displayed. Even if I delete addClass and add click function to only #tab5, its data is displayed in the fourth tab content. What am I missing?
HTML:
<li>
<a href="#" rel="tabs4" id="tab4" data-movie-id="770672122">
Tab 4
</a>
</li>
<li>
<a href="#" rel="tabs5" id="tab5" data-movie-id="10591">
Tab 5
</a>
</li>
<div class="tab-content" id="tabs4">
<div class="film">
<div class= "film-info">
<div id="title"></div>
<br>
<div id="year">
<span class="first-word">
Year:
</span>
</div>
<div id="studio">
<span class="first-word">
Studio:
</span>
</div>
<div id="synopsis">
<span class="first-word">
Synopsis:
</span>
</div>
</div>
<div id="poster" class="poster"></div>
</div>
</div>
<div class="tab-content" id="tabs5">
<div class="film">
<div class= "film-info">
<div id="title"></div>
<br>
<div id="year">
<span class="first-word">
Year:
</span>
</div>
<div id="studio">
<span class="first-word">
Studio:
</span>
</div>
<div id="synopsis">
<span class="first-word">
Synopsis:
</span>
</div>
</div>
<div id="poster" class="poster"></div>
</div>
</div>