Dynamic rows creation onclick function

I have a form. I want to create dynamic rows. I write a code , but it is not working. In this fom 5 fields are present. If any one click on Add More Other Studies then 5 more rows should be create. Please give any solution.

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
     <script type="text/javascript">
    var rowCount = 1;
    function addMoreRows(frm) {
   rowCount ++;
      var recRow = '<p id="rowCount'+rowCount+'">   <div class="col-sm-3 text-left">College&nbsp;Name: </div>
        <div class="col-sm-9"><input type="text" name="cname" placeholder="College Name" class="form-control" /></div>

        <div class="col-sm-3 text-left">Affiliated&nbsp;University: </div>
     <div class="col-sm-9"><input type="text" name="univ" placeholder="Affiliated University" class="form-control" /></div>
   <div class="col-sm-3 text-left">Course&nbsp;Name: </div>
<div class="col-sm-9"><input type="text" name="cname" placeholder="Course Name" class="form-control" /></div>
<div class="col-sm-3 text-left">Major&nbsp;Subject: </div>
<div class="col-sm-9"><input type="text" name="msub" placeholder="Major Subject" class="form-control" /></div>
<div class="col-sm-3 text-left">Final&nbsp;Percentage: </div>
<div class="col-sm-9"><input type="text" name="fper" placeholder="Final Percentage" class="form-control" /></div>


      <a href="javascript:void(0);" onclick="removeRow ('+rowCount+');">Delete</a></p>';
   jQuery('#addedRows').append(recRow);
    }

 function removeRow(removeNum) {
     jQuery('#rowCount'+removeNum).remove();
     }
     </script>

       <form action="" method="post">
      <h5 align="left"><u style="color:#449D44;">Other Studies</u>-<span style="font:normal 12px agency, arial; color:blue; text-decoration:underline; cursor:pointer;" onclick="addMoreRows(this.form);">Add More Other Studies</span></h5>
     <span  id="rowId">
<div class="col-sm-3 text-left">College&nbsp;Name: </div>
<div class="col-sm-9"><input type="text" name="cname" placeholder="College Name" class="form-control" /></div>

<div class="col-sm-3 text-left">Affiliated&nbsp;University: </div>
<div class="col-sm-9"><input type="text" name="univ" placeholder="Affiliated University" class="form-control" /></div>
<div class="col-sm-3 text-left">Course&nbsp;Name: </div>
<div class="col-sm-9"><input type="text" name="cname" placeholder="Course Name" class="form-control" /></div>
<div class="col-sm-3 text-left">Major&nbsp;Subject: </div>
<div class="col-sm-9"><input type="text" name="msub" placeholder="Major Subject" class="form-control" /></div>
<div class="col-sm-3 text-left">Final&nbsp;Percentage: </div>
<div class="col-sm-9"><input type="text" name="fper" placeholder="Final Percentage" class="form-control" /></div>
</span>
   </form>