JSFiddle - React, Tailwind, and code Playground

HTML

<form name="some_name">
      <div id="interests">
        <input type="text" name="interests[]" />
      </div>
      <input id="more-interests" type="button" value="Add more interest" />
    </form>

JavaScript

$(document).ready(function(){
      var maximumNumberOfInterests = 3;
      $('#more-interests').click(function(e){
        if ($("input[name='interests[]']").size() < maximumNumberOfInterests) {
          $('#interests').append('<input type="text" name="interests[]" />');
        } else {
          alert('The maximum number of interests has been reached!');
        }
      });
    
      $('#submit').click(function(){
        $.post('/foo.php', $('form').serialize());
      });
    });