how to select element from different divs of the same class?

Here, on change of a dropdown (values 1-100), the selected number of <tr> clones it will add on. I have tried to utilize a couple different variations of selectors, but Im missing something. When I run this code, and a user changes the dropdown in the top div, it adds fields to the second div. I know it is because the classes are the same, how couldve I cloned these to make the divs be separate from each other? The div "NewTeam" is created by cloning based on a selection made earlier.

I would like the dropdown in a given div to only add rows to the table in the same div. Keep in mind that based on the users input, there could be more than two div with class newTeam

Appreciate the help!

  $(".RosterCountSelect").change(function(){
    var numOfPlayers = this.value;
    c=$('.PlayerRow').length; //How many rows are already shown?
    for (var i = c; i < numOfPlayers; i++){ 
        $(".PlayerRow").first().clone().insertAfter(".PlayerRow:last"); 
    }
});

HTML Markup

 <div class="newTeam">
 <fieldset class="vfb-fieldset vfb-fieldset-1 str8-sports-roster-upload " id="TeamFieldset" style = "display: none">
  <div class="vfb-legend">
     <h4 style="padding-left: 40px;">New Team - <input class = "TeamName" style = "width:200px" type = "text" placeholder = "Team Name (eg: Girls 5th Grade)"/></h4>
     <label>Roster Count:</label><select class="RosterCountSelect">
     </select>
     <form>
        <table>
           <tr class = "PlayerRow">
              <td><input class="teamInput" type="text" placeholder="Player Full Name" /></td>
              <td><input class="teamInput" type="text" placeholder="Player Number" /> </td>
              <td><input class="teamInput" type="text" placeholder="Jersey Size" /> </td>
              <td><input class="teamInput" type="text" placeholder="Short Size" /> </td>
              <td><input class="teamInput" type="text" placeholder="Male/Female" /> </td>
           </tr>
        </table>
     </form>
  </div>
</fieldset>
 </div>
 <div class="newTeam">
 <fieldset class="teamInfo" id= "TeamFieldset">
  <div class="vfb-legend">
     <h4 style="padding-left: 40px;">New Team - <input class = "TeamName" style = "width:200px" type = "text" placeholder = "Team Name (eg: Girls 5th Grade)"/></h4>
     <label>Roster Count:</label><select class="RosterCountSelect">
     </select>
     <form>
        <table>
           <tr class = "PlayerRow">
              <td><input class="teamInput" type="text" placeholder="Player Full Name" /></td>
              <td><input class="teamInput" type="text" placeholder="Player Number" /> </td>
              <td><input class="teamInput" type="text" placeholder="Jersey Size" /> </td>
              <td><input class="teamInput" type="text" placeholder="Short Size" /> </td>
              <td><input class="teamInput" type="text" placeholder="Male/Female" /> </td>
           </tr>
        </table>
     </form>
  </div>
</fieldset>
</div>

Answers


You can select only one class use to allay.

$($('.newTeam')[0])
$($('.newTeam')[1])
...

I'm not sure,but try this one.

  $(".RosterCountSelect").change(function(){
    var numOfPlayers = this.value;
    var playerRow = $(this).parent('.newTeam').children('.PlayerRow');
    var playerRowlast = $(this).parent('.newTeam').children('.PlayerRow:last');
    c=playerRow.length; //How many rows are already shown?
    for (var i = c; i < numOfPlayers; i++){ 
        playerRow.first().clone().insertAfter(playerRowlast); 
    }
});

Need Your Help

Spring Security for Web MVC and REST

spring rest spring-mvc spring-security

I am developing a spring web application where in, the jsp pages don't contain the data directly, instead after the jsps are loaded, I make rest calls using ajax and interact with the server. The m...

Convert string to DateTime in SSIS

sql sql-server sql-server-2008 ssis

The data from source has string data type and sometime has invalid dates, empty column ('') I want to check whether it is valid date and convert string to date time. How can i do this in SSIS?