JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

JavaScript

class Family {

  constructor (parentElement,lastName,city,province){

    this.lastName = lastName;
    this.city = city;
    this.province = province;
    this.members = [];

    this.parentElement = parentElement;
    this.ui;

    this.build();

  }

  build(){

    this.ui = $(`<h1>The ${this.lastName} Family</h1>`);

    this.parentElement.append(this.ui);


  }

  giveNumber(){

    return this.members.length+1;

  }

  addMember(firstName){

    this.members.push({
      firstName: firstName,
      lastName: this.lastName,
      city: this.city,
      province: this.province,
      number: this.giveNumber()
    });

    console.log(this.members);

  }

  relocateMember(number,city,province){

    for(let i=0;i<this.members.length;i++){

      if(this.members[i].number == number){

        this.members[i].city = city;
        this.members[i].province = province;

      }

    }

    console.log(this.members);

  }

}

let family = new Family($('body'),"Laderoute","Chetwynd","British Columbia");

family.addMember("Dan");
family.addMember("Arlyne");
family.addMember("Danica");

family.relocateMember(3,"Prince George","British Columbia");