How to pass multiple workplace names with same names/ids from form via AJAX to another php page so I can update my MySQL table.

Question

I found solutions for similar questions from stackoverflow as below, but they didn't work for me. Possible Solution 1 here

Possible Solution 2 here

For just one workplace input field, this code works perfectly fine, but by using jQuery functions, I am prepending multiple workplace field dynamically.

Also, I don't have any trouble updating data in my MySQL database as far as I am using only one input field for workplace.

But when I prepend multiple input fields for workplace, I have trouble passing my different workplace name to php script.

So far, I have tried using solutions such as I used class="workplace" instead of id="workplace", but with that I don't even get values of my input field even on the same page when I used "alert(companyname);" to see if I get to see submitted values in alert. But no!

Also, I tried making my and other ways such as name="workplace['+index+'][name]", etc. None worked.

Database name: workplacedb table name: companyname fields: c_id ,user_id, workplace.

$(function() {
  var count = 0;

  /*  WORKPLACE codes start here  */
  $('.add-workplace').click(function() {
    var index = $('.workplace-input').length + 1;
    //$('.add-workplace').hide();
    $(".collapse").collapse('show');
    $('.workplace-lines').prepend('' +
      '<div class="input-group workplace-input">' +
      '<input type="text" name="workplacename" id="workplace" class="form-control"/>' +
      '<span class="input-group-btn">' +
      '<button class="btn btn-danger btn-remove-workplace" type="button"><span class="glyphicon glyphicon-remove"></span></button>' +
      '</span>' +
      '</div>'
    );
  });

  $(document.body).on('click', '.btn-remove-workplace', function() {
    $(this).closest('.workplace-input').remove();
  });


  $('.add-workplace').one('click', function() {
    count = 1;
  });

  $('.add-workplace').click(function() {
    if (count > 0) {
      $('.workplace-lines').append('<span class="input-group-btn main-btn">' + '<button class="btn btn-success btn-workplacesubmit" type="submit" name="submitWeb"><span class="glyphicon glyphicon-check">Submit</span></button>' + '<button class="btn btn-danger btn-workplacecancel" type="button" name="cancel" style="margin-left:15px"><span class="glyphicon glyphicon-remove">Cancel</span></button>' + '</span>');
      count = 0;
    }
  });

  // Cancel button click for workplace fields
  $(document).on('click', '.btn-workplacecancel', function() {
    $('.workplace-input').remove();
    $('.main-btn').remove();
    count = 1;
  });


  var workplace_form = $('#workplaceinfo');
  workplace_form.submit(function(event) {
    var companyname = $('#workplace').val();
    alert(companyname);
    if ($.trim(companyname) != '') {
      $.post('about.php', $("#workplaceinfo").serialize(), function(data) {
        $('.workplace-lines').hide();
        $('.main-btn').hide();
        $('#results').html(data);
        //alert(data);   
      });
    }
    // Prevent default form action
    event.preventDefault();
  });

});

<!-- about.php here --> <?php require_once("home_userinfo_retrieve.php");
 $mysqli=new mysqli('localhost',
'root',
'',
'databasename');
 $sql="UPDATE tablename SET workplace=? WHERE user_id='$userid_logged_in'";
 $stmt=$ mysqli->prepare($sql);
 $stmt->bind_param("s",
$_POST['workplacename']);
 $stmt->execute();
 $stmt=$mysqli->prepare("SELECT * FROM detailed_user_info WHERE user_id = ?");
 $stmt->bind_param("s",
$userid_logged_in);
 $stmt->execute();
 $result=$stmt->get_result();
 while($row=$result->fetch_object()) {
  $rows[]=$row;
}
?> <ul> <?php foreach ($rows as $row):?> <li> <?php echo $row->workplace;
 ?></li> <?php endforeach;
 ?> </ul>

<form action="about.php" method="post" name="workplaceinfo" id="workplaceinfo">
  <div class="form-group workplace">
    <div class="workplace-lines">
      <h5 class="add-workplace"> <a><span class="glyphicon glyphicon-plus"></span> Add your workplace </a> </h5>
    </div>
    <h5 id="results">
      </h5>
  </div>
</form>