Update image and txt content dynamically

[veysel]

Hello, i am using raspberry pi and there are 2 audio source Mic and Line. I am monitoring audio source name dynamically but i want to monitoring an icon if audio source is  LineIn then music icon should be appear , if audio source is microfon, then microfon icon should be appear. Icon and txt should be same row. I could not do this, i hope some one can help me

Here what i do;

 

 <div class="col-md-4">
                                    <div class="panel_s">
                                                <div class="panel-heading" style="text-align: center;">Audio Source</div>
                                                <div class="panel-body text-center">
												 <div class="col-md-12" style="line-height:47px; font-size:24px;">
                                                    <span id="audiosource0"> <? echo $fulldata['audiosource'][0]; ?>
                                        
                                              </div>
                                            </div>
                                        </div>
                                    </div>

<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
 <script>
                                        $(document).ready(function() {
                                            updateaudiosource();
                                            var int=self.setInterval("updateaudiosource()",1000);
                                        });

                                        function updateaudiosource(){
                                        
                                            $.ajax({
                                                type: "POST",
                                                url: "update_audiosource.php?id=<?=$id;?>",
                                                dataType:"JSON",
                                                //cache:false,

                                                success:function(my_data)
                                                {
                                                    $(my_data).each(function(key,val){

                                                     
                                                        if ($('#audiosource0').html() != val['audiosource0']) {                                                                                         $('#audiosource0').fadeOut().html(val['audiosource0']).fadeIn(); }
                                                     

                                                    });
                                                }

                                            });
                                        }

                                    </script>			

Here what i try to do using javascript

 <div class="col-md-4">
                                        <div class="panel_s">
                                            <div class="panel-heading" style="text-align: center;">Audio Source</div>
                                            <div class="panel-body text-center">
                                                <div class="col-md-12" style="line-height:48px; font-size:14px;">
                                                    <i class="fa <? if (strpos($fulldata['audiosource'][0],'stereo')){ echo 'fa-music'; }else{ echo 'fa-microphone'; } ?>" style="font-size:48px !important; width: 58px;"></i><?=$fulldata['audiosource'][0];?><div style="float: right;"><a href="?islem=switch">Switch source</a></div></div>
                                            </div>



                                        </div>
                                    </div>