As per my understanding, you want to animate the divs in order. On each click of the button currently animating div should stop and next one should start.

You can maintain the running div index in one variable and increase it on each click. Please note, in order to go with this solution, your div ids must be in pattern.

$(document).ready(function() {
        var current_index=0;
        $("#next_btn").click(function(){
            if(current_index != 0){
                $("#segment" +current_index).stop();
            }
            current_index = current_index + 1;
            $("#segment" + current_index).animate({width: "300px"}, 30000, "linear" );
        });            
});

$(document).ready(function() {
    		var current_index=0;
    	    $("#next_btn").click(function(){
                if(current_index != 0){
                	$("#segment" +current_index).stop();
                }
                current_index = current_index + 1;
    			$("#segment" + current_index).animate({width: "300px"}, 30000, "linear" );
    		});            
    });

.package_list {
	
}
.package {
	width: 100%;
}
.segment {
	display: inline-block;
}
.type1 {
	background-color: aqua;
	width: 100px;
	height: 100px;
}
.type2 {
	background-color: chartreuse;
	width: 100px;
	height: 100px;
}
.type3 {
	background-color: darkgoldenrod;
	width: 100px;
	height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="package_list">
				<div id="package1" class="package">
					<div id="segment1" class="type1 segment" value="200px">PKG1 TYPE1</div>
					<div id="segment2" class="type2 segment" value="300">PKG1 TYPE2</div>
					<div id="segment3" class="type1 segment" value="100">PKG1 TYPE1</div>
				</div>

				<div id="package2" class="package">
					<div id="segment4" class="type1 segment" value="400">PKG2 TYPE1</div>
				</div>

				<div id="package3" class="package">
					<div id="segment5" class="type1 segment" value="100">PKG3 TYPE1</div>
					<div id="segment6" class="type3 segment" value="200">PKG3 TYPE3</div>			
				</div>

				<div id="package4" class="package">
					<div id="segment7" class="type1 segment" value="150">PKG4 TYPE1</div>
					<div id="segment8" class="type2 segment" value="250">PKG4 TYPE2</div>
					<div id="segment9" class="type1 segment" value="100">PKG4 TYPE1</div>
				</div>
			</div>
			
			<div id="next_btn">[ BUTTON ]</div>

I’m making a list (like a playlist) composed by some divs. Every div, with ID like segmentN has to animate the width property.

The divs are places in order (segment1, segment2, segment3…). Only 1 div must be animated at a time, and the next div has to animate, when the button is pressed, furthermore if an animation is playing, then is has to stop.

All the divs are a result of a loop, so I need to use the same jQuery-function to all the divs. How can I do that and run next animation when the button is pressed?

Here is the JSFiddle code: https://jsfiddle.net/bz9vn7c4/1/

HTML:

<div id="package_list">
  <div id="package1" class="package">
    <div id="segment1" class="type1 segment" value="200px">PKG1 TYPE1</div>
    <div id="segment2" class="type2 segment" value="300">PKG1 TYPE2</div>
    <div id="segment3" class="type1 segment" value="100">PKG1 TYPE1</div>
  </div>

  <div id="package2" class="package">
    <div id="segment4" class="type1 segment" value="400">PKG2 TYPE1</div>
  </div>

  <div id="package3" class="package">
    <div id="segment5" class="type1 segment" value="100">PKG3 TYPE1</div>
    <div id="segment6" class="type3 segment" value="200">PKG3 TYPE3</div>           
  </div>

  <div id="package4" class="package">
    <div id="segment7" class="type1 segment" value="150">PKG4 TYPE1</div>
    <div id="segment8" class="type2 segment" value="250">PKG4 TYPE2</div>
    <div id="segment9" class="type1 segment" value="100">PKG4 TYPE1</div>
  </div>
</div>

<div id="next_btn">[ BUTTON ]</div>

CSS:

.package_list {

}
.package {
    width: 100%;
}
.segment {
    display: inline-block;
}
.type1 {
    background-color: aqua;
    width: 100px;
    height: 100px;
}
.type2 {
    background-color: chartreuse;
    width: 100px;
    height: 100px;
}
.type3 {
    background-color: darkgoldenrod;
    width: 100px;
    height: 100px;
}

jQuery:

$(document).ready(function() {
  $("#next_btn").click(function(){
    $("#segment1").animate({width: "300px"}, 30000, "linear" );
  });
});